Вертикально выровнять текст рядом с изображением?

Question

Почему не vertical-align: middle Работа? И все еще, vertical-align: top работает

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

Answer 1

На самом деле, в этом случае все довольно просто: примените вертикальное выравнивание к изображению. Так как все в одной строке, это действительно изображение, которое вы хотите выровнять, а не текст.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Проверено в FF3.

Теперь вы можете использовать flexbox для этого типа макета.

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

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

Answer 2

Вот несколько простых методов вертикального выравнивания:

Вертикальное выравнивание по одной линии: середина

Это легко: установите высоту строки текстового элемента равной высоте контейнера

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Несколько строк по вертикали: нижняя

Абсолютно поместите внутренний div относительно его контейнера

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Несколько строк по вертикали: середина

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Если вы должны поддерживать древние версии IE <= 7

Для того, чтобы заставить это работать правильно по всем направлениям, вам придется немного взломать CSS. К счастью, есть ошибка IE, которая работает в нашу пользу. настройка top:50% на контейнере и top:-50% на внутреннем div вы можете достичь того же результата. Мы можем объединить их, используя другую функцию, которую IE не поддерживает: расширенные селекторы CSS.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Переменная высота контейнера по вертикали: средняя

Это решение требует немного более современного браузера, чем другие решения, так как оно использует transform: translateY имущество. ( http://caniuse.com/)

Применение следующих 3 строк CSS к элементу будет центрировать его по вертикали в пределах его родителя, независимо от высоты родительского элемента:

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 3

Измени свой div в гибкий контейнер:

div {display:flex;}

Теперь есть два способа центрировать выравнивания для всего контента:

Способ 1:

div {align-items:center;}

DEMO

---

Способ 2:

div * {margin-top:auto; margin-bottom:auto;}

DEMO

---

Попробуйте разные значения ширины и высоты на img и различные значения размера шрифта на span и вы увидите, что они всегда остаются в середине контейнера.

Answer 4

Вы должны подать заявку vertical-align: middle чтобы оба элемента были идеально отцентрированы.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

Принятый ответ центрирует значок около половины высоты по x текста рядом с ним (как определено в спецификации CSS). Что может быть достаточно хорошим, но может выглядеть немного не так, если текст имеет восходящие или спусковые элементы, выделяющиеся сверху или снизу:

Слева текст не выровнен, справа - как показано выше. В этой статье можно найти живую демонстрацию о вертикальном выравнивании.

Кто-нибудь говорил о том, почему vertical-align: top работает в сценарии? Изображение в вопросе, вероятно, выше текста и, следовательно, определяет верхний край линейного блока. vertical-align: top на элемент span, а затем просто размещает его в верхней части строки строки.

Основное различие в поведении между vertical-align: middle а также top в том, что первый перемещает элементы относительно базовой линии блока (который размещен везде, где необходимо выполнить все вертикальные выравнивания и, следовательно, чувствует себя довольно непредсказуемым), а второй - относительно внешних границ линейного блока (что более ощутимо).

Answer 5

Техника, использованная в принятом ответе, работает только для однострочного текста ( демо), но не для многострочного текста ( демо) - как отмечено там.

Если кому-то нужно вертикально расположить многострочный текст по изображению, вот несколько способов (методы 1 и 2, вдохновленные этой статьей CSS-хитрости)

Метод № 1: таблицы CSS ( FIDDLE) (IE8 + ( caniuse))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Метод № 2: Псевдоэлемент на контейнере ( FIDDLE) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Метод № 3: Flexbox ( FIDDLE) ( caniuse)

CSS (приведенная выше скрипка содержит префиксы поставщиков):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

Answer 6

Этот код работает как в IE, так и в FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

Answer 7

Потому что вы должны установить line-height на высоту div для этого, чтобы работать

Answer 8

По сути, вам придется перейти к CSS3.

-moz-box-align: center;
-webkit-box-align: center;

Answer 9

Для записи, "команды" выравнивания не должны работать на SPAN, потому что это встроенный тег, а не тег уровня блока. Такие вещи, как выравнивание, поля, отступы и т. Д., Не будут работать с встроенным тегом, потому что встроенная точка не должна нарушать поток текста.

CSS разделяет HTML-теги на две группы: встроенные и на уровне блоков. Ищите "css block vs inline", и появляется отличная статья...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(Понимание основных принципов CSS является ключом к тому, чтобы не быть таким раздражающим)

Answer 10

Использование line-height:30px для диапазона, чтобы текст был выровнен с изображением:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Answer 11

Еще одна вещь, которую вы можете сделать, это установить текст line-height к размеру изображений в пределах <div>, Затем установите изображения на vertical-align: middle;

Это серьезно самый простой способ.

Answer 12

Не видел решения с margin в любом из этих ответов пока, так вот мое решение этой проблемы.

Это решение работает, только если вы знаете ширину вашего изображения.

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

Answer 13

Напишите эти свойства span

span{
    display:inline-block;
    vertical-align:middle;
}

использование display:inline-block; Когда вы используете vertical-align свойство. Это связанные свойства

Answer 14

background:url(../images/red_bullet.jpg) left 3px no-repeat;

Я обычно использую 3px вместо top, Увеличивая / уменьшая это значение, изображение можно изменить до необходимой высоты.

Answer 15

Вы можете установить изображение как inline element с помощью display имущество

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Answer 16

Использование свойства flex в css.

Чтобы выровнять текст по вертикали по центру, используя in flex, используя align-items:center; если вы хотите выровнять текст по горизонтали по центру, используя в flex, используя justify-content:center;.

         div{
  display: flex;
  align-items: center;
}

         <div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

Использование tabel-cell в css.

         div{
  display: table;
}
div *{
  display: table-cell;
  vertical-align: middle;
}

         <div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

Answer 17

Например, на кнопке в jQuery mobile вы можете немного ее настроить, применив этот стиль к изображению:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Answer 18

Многострочное решение:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Работает во всех браузерах и ie9+

Answer 19

Это может сбивать с толку, я согласен. Попробуйте использовать функции таблицы. Я использую этот простой трюк CSS, чтобы расположить модалы в центре веб-страницы. Он имеет большую поддержку браузера:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

и CSS часть:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

Обратите внимание, что вам нужно стилизовать и отрегулировать размер контейнера изображения и таблицы, чтобы он работал так, как вы хотите. Наслаждаться.

Answer 20

Гибкий дисплей с align-items: center;это лучший способ для вертикального выравнивания элементов

Answer 21

       div{
  display: flex;
  align-items: center;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div> 

Answer 22

В 2022 году, когда почти 96% браузеров поддерживают браузеры без префиксов , я удивлен, что никто не предложил использовать макет.

В этом JSFiddle 3 строки — это все, что необходимо для достижения цели OP (но для сравнения представлены несколько выравниваний):

      div {
    display: grid;
    grid-template-columns: min-content max-content;
    align-items: center
}

Дополнительная тонкость пользовательского интерфейса будет включать в себя необязательное использование gapсвойство, которое позволяет модулировать пространство между каждым элементом сетки в родительском контейнере сетки . ( div).

Преимущества планировки

1. Простое вертикальное и горизонтальное выравнивание элементов сетки
2. Модуляция пространства между элементами сетки
3. Изображение любого размера (с помощью ) и длина текста (в одну строку с помощью max-contentили завернутый (не показан в скрипке) с использованием min-content) будет работать - нет необходимости жестко кодировать размеры изображения в CSS (оба варианта использования продемонстрированы в JSFiddle)
4. Современный подход

---

Недостатки gridмакет

1. Поддержка старых браузеров сложнее
2. Макеты сетки обычно требуют более опытных разработчиков для правильной реализации - не так просто, как block/ inline-blockотображать

Answer 23

Во-первых, встроенный CSS вообще не рекомендуется, он действительно портит ваш HTML.

Для выравнивания изображения и диапазона вы можете просто сделать vertical-align:middle,

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://stackru.com/images/3e9e2be48bb3bdd525ddaab7d99bc476599eeb72.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Answer 24

Не уверен, почему он не отображает его в браузере вашей навигации, но обычно я использую такой фрагмент, когда пытаюсь отобразить заголовок с изображением и центрированным текстом, надеюсь, это поможет!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

Answer 25

<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>

Answer 26

Вы, вероятно, хотите это:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Как и другие предложили, попробуйте vertical-align на изображении:

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS не раздражает. Вы просто не читаете документацию.;П