how to center a <div> ?
https://codepen.io/kev00690/pen/zYgpNVV
i'm trying to make date and time div to center while keeping logo on the left, but it's not moving at all. what i'm doing wrong ?
portfolio
...
2 Replies
You have a couple of issues which are preventing this from happening and nothing that would actually enable it to happen.
On the .logo you have
This is telling the logo to take up all of the available space so it is pushing the "time" element right over as far as possible.
Then, in your media query for screens over 968px you have this:
As your comment correctly indicates, this is pushing them to the center, however it is attempting to push both of the elements (logo and time) to the center which is not what you want (it is currently failing to do this due to the previous issue with the logo extending to fill the full available space).
Note - in your media queries you don't need to redefine properties that don't change.
As with most things, there are several ways that you could achieve this.
For example, to continue with flex, you could an "empty" element after the time element. This could be added as a pseudo element so as to avoid adding extra markup.
Then `justify-content: between;' should place the time element in the center.
Note - You would need to ensure that this "empty" element had the same width as the logo.
Alternatively you could use grid, giving it 3 columns. This would avoid the need to add any extra markup or pseudo element, something like this on the .header (in your max media query block):
damnnn
it works now