Menu
I'm struggling to centre a select drop-down inside a div. I've tried both margin: auto; and text-align: centre; to no avail
Here is my fiddle http://jsfiddle.net/U8Kja/
Can anyone figure this out? Am I missing something?
Thanks
240
Dropdown button can be positioned in the center of the page by setting the “text-align” property of dropdown div to center.
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
text-align: center – By setting the value of text-align property of parent div tag to the center. margin: auto – By setting the value of margin property to auto. display: flex – By setting the value of display property to flex and the value of justify-content property to center.
Use display: table-cell on the child element to make it behave like a <td> elements. Use text-align: center and vertical-align: middle on the child element to center it horizontally and vertically.
Add this to the bottom of your fiddle.
select {
display: block;
margin: 0 auto;
}
The margin auto on right and left side will center a block element within the parent div.
113
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
