Menu
I've looked this up and the outlook seems bleak. I'm not interested in using a table. I have 6 or so 'a element' inline-blocks that make up a menu. It's slick, except all the 'a elements' are set to width: auto; to accommodate their text. Without an explicit width, I'm not able to center align them. I have a container div and a child div that wraps around my 'a elements'.
Any thoughts? Thanks Mike
510
Using the Position, Top, Left, and Transform Properties To horizontally and vertically center a div within a div whose height and width is unknown, you can use the transform property instead of the margin property. You'll still use the CSS position, top, and left properties.
Div is basically BLOCK with FULL-WIDTH (100%) so set margin:auto is doesn't get anything since the width is full to the parent. To make it work, you can did that by 2 ways, use text-align:center for div -> this will align text inside div center. include width property in div (i.e. width:200px) and it will work fine.
Simply add text-align center to parent div and set the child div display to inline-block. This will force our div to behave like inline element and therefore subjected text-align center.
Easiest way to center something regardless of page width is margin: auto; in your CSS, with height and width defined. Save this answer.
You could set the style of the a element to margin: 0 auto, but that doesn't work in IE6. In IE6, you should set the wrapper div to text-align: center, and (optionally) set the text-alignment for the a element back to text-align: left
184
<div style="width: auto; margin-left: auto; margin-right: auto">
div content
</div>
will align center on the page
45
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
