I don't even know if this is possible using CSS only, but I have to ask.
PLEASE, read the specs before you provide an answer, accordingly. Thank you!
My markup:
<div class="wrapper">
<img src="http://placehold.it/350x150">
<p>Some text random size</p>
</div>
Obviously, .wrapper will have the height of my img element, if that's a block. Then, I need the p element to be centered horizontally and vertically inside the wrapper. I don't have a fixed width or height for the p element.
So, regardless paragraph size or even image size, it should be vertically and horizontally aligned, as is shown here http://i.imgur.com/phiR48H.png or here http://i.imgur.com/Xvdt42j.png.
If I set absolute position on the paragraph, it will not vertically align, because I cannot set negative margin if I don't know paragraph height. I was thinking about table and table-cell (vertical-align: middle;), but I only have 1 cell. Any thoughts?
Added fiddle: http://jsfiddle.net/f3x7977z/
It's important that the provided solution have backwards compatibility, in special in IE8+.
Any suggestions on extra wrappers, for the sake of the final result, are welcome!
Change the CSS property position
of the wrapper to relative and of element you want centered to absolute.
Then position the element in the middle of the wrapper using top: 50%
and left: 50%
.
After this you will notice that the element is not exactly centered, because it's own height and width are off the calculation.
So we fix with the property transform: translate(-50%, -50%)
, which brings the element half of it's height up, and half it's width left. The result will be a vertically and horizontally centered element.
Since we are taking IE8 into consideration, we will use a filter
to achieve the same effect as the transform: translate
.
In order to generate the filter
attribute, the following resource was used: IE's CSS3 Transforms Translator
.box {
margin: 10px;
display: inline-block;
position: relative;
}
.box span {
position: absolute;
top: 50%;
left: 50%;
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 1);
padding: 5px;
}
.box.translate > span {
transform: translate(-50%, -50%);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
}
<div class="box translate">
<img src="http://placehold.it/500x200" />
<span>centered text</span>
</div>
Other answers posted here already address the IE8 requirement. This answer offers an clean and efficient solution for people who don't care about IE8.
HTML (no changes)
<div class="wrapper">
<img src="http://placehold.it/350x150"/>
<p>My text, size unknowkn</p>
</div>
CSS
html, body { height: 100%; } /* necessary when using percentage heights within body
on non-absolutely positioned children (such as .wrapper)
http://stackoverflow.com/a/31728799/3597276 */
.wrapper {
height: 100%;
width: 100%;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
}
img {
position: absolute;
left: 50%; /* positions img relative to container */
top: 50%; /* positions img relative to container */
transform: translate(-50%, -50%); /* positions img relative to its height and width */
}
p {
position: absolute;
left: 50%; /* positions p relative to container */
top: 50%; /* positions p relative to container */
transform: translate(-50%, -50%); /* positions p relative to its height and width */
margin: 0;
}
DEMO: http://jsfiddle.net/f3x7977z/7/
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