All geek questions in one place

How to vertically align image and text in a table cell?

I am trying to get the text on the right and vertically centered with the image. How can i do this?

My current code is:

<div style="display: table;">
  <div style="display: table-cell;"><img src="//dummyimage.com/100"></div>
  <div style="display: table-cell;">text</div>
</div>
Run codeHide result
+4
source share
4 answers

use CSS3 Flexible box layout :

from the documentation:

, , . , - , , .

:

#pageElement{display:flex; flex-wrap: nowrap; align-items: center}
<div id="pageElement">
  <div> <img src="http://placehold.it/350x150"> </div>
  <div> text </div>
</div>
Hide result

cheat-sheet ,

+3

vertical-align baseline. middle . MDN.

.table {
  display: table;
}
.table > div {
  display: table-cell;
  vertical-align: middle;
}
<div class="table">
  <div><img src="//dummyimage.com/100"></div>
  <div>text</div>
</div>
Hide result
+1

Use td, tr and a table.

<body>
<table>
   <tr width="100%;">
      <td width="50%;" valign="bottom">
      <img style="width:100%" src="https://s.w.org/images/home/screen-themes.png?1"/> </td>
      <td width="50%;" align="center" valign="center">  text dddddddddddd  </td>
   </tr>
</table>
</body>

See JsFiddle, for example: https://jsfiddle.net/bndr6x4y/1/

-2
source

You can set the negative top edge of the text.

<div style="display: table-cell; top-margin: -500px">  text </div>

If the image height was 500 pixels.

-2
source

Source: https://habr.com/ru/post/1666808/

More articles:


All Articles