Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center an item with position: relative

I've got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and will appear in multiple sizes in one instance.

How would I center multiple items with position: relative both vertically and horizontally when I won't know the the size of the parent div?

I know the position: absolute trick with negative margins, but this situation calls for something different.

Here's the code:

.OuterCase {    position  : absolute;    width     : 100%;     height    : 100%;    text-align: center; }  .InnerItem  {     width  : 38px;    height : 38px;    display: inline-block; } 

I've got it to center the items horizontally; it's getting the vertical that's being a bit elusive.

like image 967
Flippinmonk Avatar asked Jul 08 '11 14:07

Flippinmonk


People also ask

How do you center a relative in CSS?

If you want to center something horizontally in CSS you can do it just by, using the text-align: center; (when working with inline elements) or margin: 0 auto; (when working with block element).

How do you place an element Center with position absolute?

To center an element both vertically and horizontally: position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; But if you would like to understand how I came to these solutions, read further for more explanation.


2 Answers

Much simpler:

position: relative;  left: 50%; transform: translateX(-50%); 

You are now centered in your parent element. You can do that vertically too.

like image 133
Hexxefir Avatar answered Oct 13 '22 17:10

Hexxefir


Alternatively, you may also use the CSS3 Flexible Box Model. It's a great way to create flexible layouts that can also be applied to center content like so:

#parent {     -webkit-box-align:center;     -webkit-box-pack:center;     display:-webkit-box; } 
like image 38
DADU Avatar answered Oct 13 '22 15:10

DADU