Axioma - Cristian Marucci Axioma - Cristian Marucci - 2 months ago 5
CSS Question

HTML + CSS for Centering Vertical Text next to an Image

Hi Everybody and tks in advance for your help... I'm looking for the best practice to resolve a simple question:



.left {
float: left;
width: 79%;
margin-right: 1%;
}
.left img {
float: right;
}
.right {
float: right;
width: 20%;
}

<div class="main">
<div class="left">
<img src="http://placehold.it/200x200" />
</div>
<div class="right">A TEXT</div>
</div>





How should I center the text vertically at the middle of the image (obviusly not using px in margin-top or bottom, because the width/height of the image will be dinamic).
Thanks!

Answer

You could use flexbox. See the example:

.main{
   display: flex;
   align-items: center;
}

https://jsfiddle.net/zb2ozq1k/1/

Comments