Menu
I have a section of content in a div, and this is currently centered to the left. Fiddle.
I tried adding a container div like:
<div style='text-align:center; width:100px;'>[content]</div>
But no luck. Also tried this:
<div style='margin: 0px auto; width:100px;'>[content]</div>
Content is still left aligned.
This works, but I'd like to find the right way to do this with CSS:
<div style='width:100px;' align='center'>[content]</div>
Assistance appreciated. I'm tempted to do this with tables, but I need to break out of old habits!
621
This is because text-align:center only affects inline elements, and <aside> is not an inline element by default. It is a block-level element. To align it, we will have to use something other than text-align , or turn it into an inline element.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Set the width of the outer element (i.e. 100% covers the whole line). Change it according to your requirements. Set the margin property to "auto" to horizontally center the <div> element within the page. The "margin: 0 auto" does the actual centering.
If you're centering an entire block element, such as a div, the text-align property won't work. (Note that it does work when centering the content inside a div.) Instead, you can use the margin property to center the entire element.
If you try to get the outer div centered respect to its parent (bodyin this case) you should set its lateral margins to auto:
body div{
margin: auto;
}
as you can see here
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
