Как выровнять текст по вертикали в несколько строк - PullRequest
Новая
       3

Как выровнять текст по вертикали в несколько строк

4 голосов
/ 25 февраля 2012

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

В основном, у меня есть три поля, каждое с изображением слева, и некоторый текст в них, проблема заключается в получениивыровняйте текст по вертикали, предварительно прочитав о том, как на самом деле работает вертикальное выравнивание (раньше я не был полностью уверен), я попытался реализовать его, чтобы решить проблему, и он отлично работает на всех блоках, кроме одногоВы увидите, что я имею в виду в демоверсии ниже:

http://jsfiddle.net/5vxSP/1/

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

Существует ли элегантный способ сделать это так, чтобы текст оставался в середине поля независимо от количества строк / размера шрифта, которые я решил использовать?

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

Ответы [ 2 ]

7 голосов
/ 25 февраля 2012

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

<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>

vertical-align в CSS выравнивает встроенный элемент, к которому он применяется, с другими встроенными элементами вокруг него.Только в таблицах он выравнивается в ячейке таблицы.

4 голосов
/ 25 февраля 2012

Исходя из предложенного решения аналогичной проблемы здесь , вы можете сделать что-то подобное.

  1. Поместите тексты ссылок в промежутки.
  2. Дайте этим пролетам display:inline-block и правильную ширину; исходная ширина элементов li за вычетом изображений и отступов. 

.main-services {
  overflow: auto;
  padding: 17px 0 9px 0;
}
.main-services li {
  list-style: none;
  float: left;
  border-right: 1px dashed #E53B00;
  padding-right: 14px;
}
.main-services li a {
  display: block;
  height: 78px;
  color: #ED5D04;
  text-decoration: none;
}
.main-services li a img {
  vertical-align: middle;
}
.main-services li a span {
  display: inline-block;
  vertical-align: middle;
}
.service-1 span { width: 85px; }
.service-2 span { width: 131px; }
.service-3 span { width: 151px; }
<ul class="main-services border-common">
  <li class="service-1">
    <a href="#">
      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
      <span>Some text goes here</span>
    </a>
  </li>
  <li class="service-2">
    <a href="#">
      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
      <span>More text here</span>
    </a>
  </li>
  <li class="service-3">
    <a href="#">
      <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
      <span>More text goes here but this text overruns</span>
    </a>
  </li>
</ul>

Или проверьте обновление скрипки (включая исходную таблицу стилей сброса): http://jsfiddle.net/MrLister/5vxSP/15/

Примечание: это не будет работать в IE8.

...