Menu
I have a small problem but I can't get it solved. I have a content header of 864px width, a background image repeated-y and footer image. Now I have this <div> over the background image and I want it to be like 855px width and the text align left but yet aligned center so it fits in the bg.
I once had it oke width some padding left but I figured out that was the correct padding for my screen resolution.
Soo briefly it is: Setting a div width - align the div center - align its text (content) left.
808
To center a div horizontally on a page, simply set the width of the element and the margin property to auto. That way, the div will take up whatever width is specified in the CSS and the browser will ensure the remaining space is split equally between the two margins.
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
Set auto margins on the inner div:
<div id="header" style="width:864px;"> <div id="centered" style="margin: 0 auto; width:855px;"></div> </div> Alternatively, text align center the parent, and force text align left on the inner div:
<div id="header" style="width:864px;text-align: center;"> <div id="centered" style="text-align: left; width:855px;"></div> </div> 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
