CSS в один или несколько линейных вертикальное выравнивание

У меня есть титул, который может иметь одну или несколько линий.

Как я могу выровнять текст по вертикали? Если бы это всегда была одна строка, я мог бы просто установить высоту строки на высоту контейнера.

Я могу сделать это с помощью JavaScript, но мне это не очень нравится, я ищу чистый способ CSS.

также, если контейнер может расширяться с помощью линий, это было бы идеально, поэтому я всегда могу иметь одно и то же заполнение сверху и снизу.

7 75
html css

7 ответов:

для этого вы можете использовать display:table-cell свойства:

.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}
<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

но он работает IE8 и выше. Прочитайте эту статью для получения дополнительной информации: CSS трюки: вертикально центр многострочный текст.

109

Если вам не нравится display:table трюк (я знаю, что нет) вот решение без него:

.cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"A0"; overflow:hidden;
}

в HTML

<div class="cen">
 <p>Text in div 1</p>
</div>

Это дает div высоту 5em, если содержание не heigher, то оно растет.
Живой пример здесь.

Edit: О, какие браузеры это должно работать? IE8 не будет сотрудничать.

(позднее редактирование: обновлен CSS для обработки проблем в Chrome)

9

мне очень нравится такое решение:

<div>
    <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

Не стесняйтесь использовать таблицы стилей, и 100% по высоте...

также может потребоваться закомментировать пробелы между тегами span, так как это встроенные блоки

кредит идет на ад. Я получил его от!--11-->здесь

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span>
</div>

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span>
</div>

Примечание: это, кажется, не работает с содержимым нескольких строк.

9

что-то вроде этого

HTML

<div>
    <p>
       Lorem Ipsum is simply
    </p>
</div>

CSS

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

если вы хотите, чтобы ваш текст был отзывчивым, обертывание слов от одной до нескольких строк, поскольку ширина динамически меняется, упомянутый выше трюк с inline-block helper (которые имеют лучшую совместимость здесь) может быть недостаточно, так как .inlinehelper можно нажать обертывание текста под себя.
Полное решение вот такой задачи симпел:

HTML:

<div id="responsive_wrap">
    <span class="inlinehelper"><span id="content">        
</div>

CSS:

#responsive_wrap {   
   display: block;    
   height: 100%; //dimensions just for   
   width: 100%;  //example's sake
   white-space: nowrap;
}

#content {   
   display: inline-block;        
   white-space: initial;
}

.inlinehelper {
   height: 100%;    
   width: 0;
   vertical-align: middle;
   display: inline-block;
}

обратите внимание элемент white-space:nowrap свойство, которое предотвращает .inlinehelper и #content обернуть по отношению друг к другу. white-space:initial on #content сбрасывает возможность обернуть для ;

Другой Вариант: Скорее дело в личных предпочтениях. Вы можете использовать псевдо элемент вместо .inlinehelper. Уберите .inlinehelper css правила и элемент и добавить этот псевдо - элемент css селектор:

#responsive_wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0px;
}

P. S.: Я понял, что это очень старый вопрос слишком поздно, поэтому пусть это ответьте, может быть, это будет полезно для кого-то.

2

стиль мудрый, таблица будет лучшим способом компоновки вашего контента (поместите теги стиля в CSS):

<table style="border:1;collapse;width:300px;padding:5px;background-color:red;">
<tr>
    <td style="width:250px;vertical-align:middle;">Lorem ipsum dolor sit amet ipswum dolor</td>
    <td style="width:50px;vertical-align:top;color:white;">1 Line</td>
</tr>

для подсчета строк потребуется скрипт JS, посмотрите здесь:

http://www.webdeveloper.com/forum/archive/index.php/t-44333.html

1

мне нравится такое решение. Я где-то видел этот трюк в stackoverflow, но не помню, где именно. Очень полезно! :)

ul {
background: #000; 
  padding-left: 0;
}
ul li {
  height: 130px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 3px solid #F7F7F7;
}
ul li:last-of-type {
  border-bottom: none;
}
ul li:after {
  color: #333;
  position: absolute;
  right: 35px;
  font-size: 40px;
  content: ">";
  top: 50%;
  margin-top: -24px;
  color: #FFDA00;
  -webkit-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
ul li a {
  font-size: 35px;
  font-family: Arial;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 40px;
  height: 100%;
  line-height: 38px;
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
ul li a:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}
ul li a span {
  display: inline-block;
  vertical-align: middle;
}
<ul>
	<li class="dn">
		<a href="kapec.ru.php"><span> Lorem ipsum 1 LINE</span></a>
		</li>
		<li>
			<a href="varianti.ru.php"><span>Lorem ipsum <br> 2 lines </span></a>
		</li>

	</ul>
0