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.
This question is related to
css
alignment
css-position
center
Much simpler:
position: relative;
left: 50%;
transform: translateX(-50%);
You are now centered in your parent element. You can do that vertically too.
If you have a relatively- (or otherwise-) positioned div you can center something inside it with margin:auto
Vertical centering is a bit tricker, but possible.
You can use calc
to position element relative to center. For example if you want to position element 200px
right from the center .. you can do this :
#your_element{
position:absolute;
left: calc(50% + 200px);
}
When you use signs +
and -
you must have one blank space between sign and number, but when you use signs *
and /
there is no need for blank space.
Another option is to create an extra wrapper to center the element vertically.
#container{_x000D_
border:solid 1px #33aaff;_x000D_
width:200px;_x000D_
height:200px;_x000D_
}_x000D_
_x000D_
#helper{_x000D_
position:relative;_x000D_
height:50px;_x000D_
top:50%;_x000D_
border:dotted 1px #ff55aa;_x000D_
}_x000D_
_x000D_
#centered{_x000D_
position:relative;_x000D_
height:50px;_x000D_
top:-50%;_x000D_
border:solid 1px #ff55aa;_x000D_
}
_x000D_
<div id="container">_x000D_
<div id="helper">_x000D_
<div id="centered"></div>_x000D_
</div>_x000D_
<div>
_x000D_
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;
}
Source: Stackoverflow.com