HTML + CSS用于居中图像旁边的垂直文本

Question

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 1

You could use flexbox. See the example:

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

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

Answer 2

I'd get rid of float and use table-cell s instead. Then, use vertical-align:middle for the text.

Like this:

 .main{ display: inline-table; border: 1px solid blue; } .left { width: 79%; margin-right: 1%; display: table-cell; border: 1px solid green; } .right { width: 20%; border: 1px solid red; display: table-cell; vertical-align: middle; } 

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

Answer 3

h1 {
  display: inline;
   vertical-align:top;
}

---

<div class="middle">
  <img src="http://placekitten.com/200/150" >
   <h1>A TEXT</h1>
</div>