У меня проблема с высотой строки, которую я не могу понять.
Следующий код будет центрировать изображение внутри div:
CSS
.bar {
height: 800px;
width: 100%;
line-height:800px;
background-color: #000;
text-align: center;
}
.bar img {
vertical-align: middle;
}
HTML
<div class="bar">
<img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>
Однако, если я изменю высоту строки на 100%, высота строки не вступит в силу (или, по крайней мере, не станет 100% от div).
Кто-нибудь знает, что я делаю не так?
Я знаю, что это старый вопрос, но я нашел то, что для меня является идеальным решением.
Я добавляю этот CSS в div, который хочу центрировать:
div:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
Это работает каждый раз, и это чисто.
Изменить: просто для завершения я использую scss, и у меня есть удобный миксин, который я включаю для каждого родителя , прямых детей которого я хочу вертикально центрировать:
@mixin vertical-align($align: middle) { &:before { content: ""; display: inline-block; height: 100%; vertical-align: $align; // you can add font-size 0 here and restore in the children to prevent // the inline-block white-space to mess the width of your elements font-size: 0; } & > * { vertical-align: $align; // although you need to know the font-size, because "inherit" is 0 font-size: 14px; } }
Полное объяснение:
div:before
добавит элемент внутри div, но перед любым из его дочерних элементов. При использовании:before
или:after
мы должны использоватьcontent:
объявление, иначе ничего не произойдет, но для нашей цели содержимое может быть пустым. Затем мы говорим элементу, что он должен быть такого же высокого, как и его родительский элемент, при условии, что высота его родительского элемента определена и этот элемент является как минимум встроенным блоком.vertical-align
определяет вертикальное положение себя по отношению к родителю, в отличие от того,text-align
что работает по-другому.В
@mixin
Декларация для пользователей Sass и он будет использоваться , как это:div { @include vertical-align(middle) }
источник
Когда вы используете процент в качестве высоты строки, он основан не на контейнере div, а на размере шрифта.
источник
line-height: 100% был бы простым способом вертикального центрирования элементов, если бы он был рассчитан относительно контейнера, но это было бы слишком просто, поэтому он не работает.
Вместо этого это просто еще один способ сказать line-height: 1em (верно?)
Другой способ вертикального центрирования элемента:
.container { position:relative; } .center { position:absolute; top:0; left:0; bottom:0; right:0; margin: auto; /* for horiz left-align, try "margin: auto auto auto 0" */ }
источник
может быть не очень красиво, но он работает и имеет семантический характер;
<div class="bar" style="display: table; text-align: center;"> <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" /> </div>
display: table-cell дает элементу уникальную возможность таблицы для выравнивания по вертикали (по крайней мере, я думаю, что это уникально)
источник
Это очень поздний ответ, однако в современных браузерах, предполагая, что родительский элемент также составляет 100% высоты экрана, вы можете использовать
vh
блок просмотра. FIDDLEline-height: 100vh;
Поддержка браузера
источник
Это решение работает в IE9 и выше. Сначала мы устанавливаем верхнее положение дочернего элемента на 50% (середина родительского элемента). Затем с помощью
translate
правила переместите ребенка вверх на половину его реального роста. Основное преимущество заключается в том, что нам не нужно определять высоту ребенка, она вычисляется браузером динамически. JSFiddle.bar { height: 500px; text-align: center; background: green; } .bar img { position: relative; top: 50%; transform: translate(0, -50%); }
источник
Более современный подход - использовать для этого flexbox, он проще и чище. Однако Flexbox это совершенно другая парадигма , от того, что
inline-block
,float
илиposition
раньше.Чтобы выровнять предметы внутри
.parent
вас:.parent { display: flex; align-items: center; }
Вот и все. Дети
flex
родителей автоматически преобразуется в сгибают дочерние элементы.Вы должны узнать больше о flexbox, хорошее место для начала - это шпаргалка: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
источник
Вы можете установить высоту строки в зависимости от высоты этого элемента. Если высота элемента 200 пикселей означает, что вам нужно установить высоту строки 200 пикселей, чтобы центрировать текст.
span { height: 200px; width: 200px; border: 1px solid black; line-height: 200px; display: block; }
<span>Im vertically center</span>
источник
Это современное решение, в котором вам нужно установить следующий CSS в контейнер div или внешний div.
.outer-div { display: flex; justify-content: center; align-items: center; }
Другое следующее решение может быть применено к элементу, который вы хотите сделать центрированным по вертикали. Обратите внимание, что внешний или контейнерный div должен быть
.inner-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
Обратите внимание, что внешнее или контейнерное положение div должно быть относительным.
источник