HTML + CSS for Centering Vertical Text next to an Image

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!

I would try something like this [FIDDLE](https://jsfiddle.net/Lf2fk8cc/2/) — Abhi, Oct 01 '16 at 14:47
Possible duplicate of [Vertically align text next to an image?](http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) — Rob, Oct 01 '16 at 17:53
Instead of "Centering Vertical Text" I think you mean "Vertically Centering Text". Otherwise, it sounds like it's the *text* that's vertical, rather than the axis upon which it's being centered. — Phantom Watson, Feb 17 '17 at 22:29

marcelo2605 · Accepted Answer · 2016-10-01T14:39:33.523

6

You could use flexbox. See the example:

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

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

edited Oct 01 '16 at 14:39

answered Oct 01 '16 at 14:37

marcelo2605

2,734
4
29
55

1

Your fiddle is missing the CSS. Don't know if that was intentional. – yxre Oct 01 '16 at 14:38

score 2 · Answer 2 · answered Oct 01 '16 at 14:45

I'd get rid of float and use table-cells 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>

Razia sultana · Answer 3 · 2016-10-01T18:02:54.600

0

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

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

edited Oct 01 '16 at 18:02

answered Oct 01 '16 at 17:50

Razia sultana

2,168
3
15
20

HTML + CSS for Centering Vertical Text next to an Image

3 Answers3