Как вертикально центрировать <span> внутри div?

Код:

<div style="
  border:solid 1px gray;
  cursor:text;
  width:400px;
  padding:0px;"
id="theMainDiv">
  <span id="tag1_outer" style="
    background:#e2e6f0;
    padding-right:4px;
    padding-left:4px;
    border:solid 1px #9daccc;
    font:normal 11px arial;
    color:#3c3c3c
  ">as</span>
</div>

Теперь, когда он отображает, пролет выравнивает нижний левый угол div.

Ответ 1

См. мою статью о понимание вертикального выравнивания. Существует несколько методов для достижения того, чего вы хотите в конце обсуждения.

(Супер-короткая сводка: либо установить высоту линии ребенка, равную высоте контейнера, либо установить позиционирование на контейнере и полностью поместить дочерний элемент в top:50% с помощью margin-top:-YYYpx, а YYY - половину известная высота ребенка.)

Ответ 2

В родительском DIV добавьте

display:table;

и у вашего дочернего элемента add

 display:table-cell;
 vertical-align:middle;

Ответ 3

Как и в аналогичном вопросе, используйте display: inline-block с элементом-заполнителем для вертикального центрирования пролета внутри элемента блока:

html, body, #container, #placeholder { height: 100%; }

#content, #placeholder { display:inline-block; vertical-align: middle; }

<!doctype html>
<html lang="en">
  <head>
  </head>

  <body>
    <div id="container">
      <span id="content">
        Content
      </span>
      <span id="placeholder"></span>
    </div>
  </body>
</html>

Ответ 4

Быстрый ответ для одиночного диапазона

Сделайте дочерний элемент (в данном случае span) тем же самым line-height, что и родительский <div> height

<div class="parent">
  <span class="child">Yes mom, I did my homework lol</span>
</div>

Затем вы должны добавить правила CSS

.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }

Или вы можете настроить таргетинг с помощью дочернего селектора

.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }

Фон для моего собственного использования

Я столкнулся с подобной проблемой, когда мне нужно было вертикально центрировать элементы в мобильном меню. Я сделал div и промежутки внутри одной линии. Обратите внимание, что это для проекта метеора и, следовательно, не используется встроенный css;)

HTML

<div class="international">        
  <span class="intlFlag">
    {{flag}}        
  </span>

  <span class="intlCurrent">
    {{country}}
  </span>

  <span class="intlButton">
    <i class="fa fa-globe"></i>
  </span> 
</div>

CSS (опция для нескольких интервалов в div)

.international {
  height: 42px;
}

.international > span {
  line-height: 42px;
}

В этом случае, если бы у меня был только один диапазон, я мог бы добавить правило CSS непосредственно к этому диапазону.

CSS (опция для одного определенного диапазона)

.intlFlag { line-height: 42px; }

Вот как он отображается для меня

Ответ 5

В родительский div добавьте высоту, скажем, 50px. В дочернем промежутке добавьте высоту линии: 50 пикселей; Теперь текст в промежутке будет вертикально центром. Это сработало для меня.