Свойства CSS: Как установить свойство вертикального выравнивания элемента

Последнее обновление 01 декабря 2018 10:43:17 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Решение:

HTML-код:

 <!DOCTYPE html>
  <html>
  <head>
  <title>How to set vertical align property of an element</title>
  <style type="text/css">
img.top {
    vertical-align: text-top;
}
img.middle {
    vertical-align: middle;
}
img.bottom {
    vertical-align: text-bottom;
}
  </style>
  </head>
  <body>
  <h1><strong>w3resource Tutorial</strong></h1>
<p>An image<img src="//kodesource.top/images/w3resource-logo.png" alt="w3resource logo" width="100" height="50" /> with default alignment : w3resource web development tutorial</p> 
<p>An image<img class="top" src="//kodesource.top/images/w3resource-logo.png" alt="w3resource logo" width="100" height="50" />   with text-top alignment : w3resource web development tutorial</p> 
<p>An image<img class="middle" src="//kodesource.top/images/w3resource-logo.png" alt="w3resource logo" width="100" height="50" /> with text-middle alignment : w3resource web development tutorial</p>
<p>An image<img class="bottom" src="//kodesource.top/images/w3resource-logo.png" alt="w3resource logo" width="100" height="50" /> with text-bottom alignment : w3resource web development tutorial</p>
  </body>
  </html>

Демонстрация в реальном времени:

См. Pen вертикальное выравнивание-свойство-ответ по w3resource ( @ w3resource ) на CodePen .

Посмотреть решение в браузере

Поддерживаемый браузер