Вертикально выровнять текст рядом с изображением?
почему vertical-align: middle
работы? И все же ... --2--> тут работа.
<div>
<img style="width:30px;height:30px">
<span style="vertical-align:middle">Doesn't work.</span>
</div>
20 ответов
на самом деле, в этом случае это довольно просто: применить вертикальное выравнивание к изображению. Поскольку все это в одной строке, это действительно изображение, которое вы хотите выровнять, а не текст.
<!-- 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>
вот некоторые простые методы для вертикального выравнивания:
однострочное вертикальное выравнивание: средний
это легко: установите высоту строки текстового элемента, равную высоте контейнера
<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
чтобы заставить это работать правильно по всем направлениям, вам придется немного взломать 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/#feat=transforms2d)
применение следующих 3 строк CSS к элементу будет вертикально центрировать его внутри своего родителя независимо от высоты родительского элемента:
position: relative;
top: 50%;
transform: translateY(-50%);
изменить div
в контейнер:
div {display:flex;}
Теперь есть два метода центрирования выравниваний для всего содержимого:
Способ 1:
div {align-items:center;}
Способ 2:
div * {margin-top:auto; margin-bottom:auto;}
попробуйте различные значения ширины и высоты на img
и разных значения размера шрифта на span
и вы увидите, что они всегда остаются в середине контейнера.
вы должны подать заявку 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
это то, что первые элементы перемещаются относительно базовой линии коробки (которая размещается там, где это необходимо для выполнения всех вертикальных выравниваний и, таким образом, чувствует себя довольно непредсказуемой) и второй относительно внешних границ линейного окна (что более ощутимо).
метод, используемый в принятом ответе, работает только для однострочного текста (демо), но не многострочный текст (демо) - как отметили там.
Если кому-то нужно вертикально центрировать многострочный текст на изображение, вот несколько способов (Методы 1 и 2 вдохновлены это CSS-трюки статья)
метод #1: таблицы CSS (скрипка) (IE8+ (caniuse))
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
Метод #2: псевдо-элемент на контейнере (скрипка) (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 (скрипка) (caniuse)
в CSS (вышеуказанная скрипка содержит префиксы поставщика):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
этот код работает в IE, а также FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
для записи "команды" выравнивания не должны работать на промежутке, потому что это in-line тег, а не блок-уровень тег. Такие вещи, как выравнивание, поля, заполнение и т. д., не будут работать на встроенном теге, потому что точка inline не должна нарушать поток текста.
CSS делит HTML-теги на две группы: линейные и блочные. Поиск "css block vs inline" и отличная статья показывает вверх...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(понимание основных принципов CSS является ключом к тому, что это не так раздражает)
еще одна вещь, которую вы можете сделать, это установить текст line-height
к размеру изображений в пределах <div>
. Затем установите изображения в vertical-align: middle;
это действительно самый простой способ.
использовать line-height:30px
для промежутка, чтобы текст выравнивался с изображением:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
не видел решения с 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;
}
background:url(../images/red_bullet.jpg) left 3px no-repeat;
Я обычно использую 3px вместо top
. Увеличивая / уменьшая это значение, изображение можно изменить на требуемую высоту.
напишите эти свойства span
span{
display:inline-block;
vertical-align:middle;
}
использовать display:inline-block;
при использовании vertical-align
собственность.Это ассоциированные свойства
на кнопке в jQuery mobile, например, вы можете немного настроить ее, применив этот стиль к изображению:
.btn-image {
vertical-align:middle;
margin:0 0 3px 0;
}
вы можете установить изображение в качестве 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>
многострочный решение:
<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+
это может быть запутанным, я согласен. Попробуйте использовать функции таблицы. Я использую этот простой 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; }
обратите внимание, что вы должны стиль и настроить размер изображения и контейнера таблицы, чтобы заставить его работать, как вы хотите. Наслаждаться.
во-первых встроенный CSS не рекомендуется вообще, это действительно испортит ваш HTML.
для выравнивания изображения и диапазона вы можете просто сделать vertical-align:middle
.
.align-middle {
vertical-align: middle;
}
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
вы, вероятно, хотите этого:
<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 не раздражает. Ты просто не читаешь!--8-->документация. ; P