Вертикально отцентрировать одно из двух делений на одной строке?

Question

Как сделать так, чтобы текст «Создать новую позицию» располагался по центру?

HTML / CSS ниже.

Добавление margin-top:5px в div "Create new .." помогает, но кажется хакерским.

<div style="margin-top:5px">
  <div style="float:left">Create new position</div>
  <div style="float:right"><input type="submit" id="x" value="Save"></div>
  <div style="clear: both;"></div>
</div>

Answer 1

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

HTML

<div class="row">
  <span class="left">Create new position</span>
  <span class="right"><input type="button" value="Save" />
</div>

CSS

/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */
* { font-family: Tahoma, sans-serif; font-size: 12px; }
.row { border: 1px solid #ccc; }
/* END EXAMPLE ONLY PORTION */

.row { height: 24px; }
.row > span { line-height: 24px; }
.left { float: left; }
.right { float: right; }

Хитрость заключается в том, чтобы установить .row, содержащий DIV, на 24px высоту, а также установить для содержащихся SPAN элементов значение line-height, равное 24px. Делая это, вы сообщаете браузеру, сколько вертикального пространства нужно занять для строки текста.

Обратите внимание, однако, что 24px не является важной частью - важная часть определяет, каков ваш button, который основан на вашем CSS и выбранном вами шрифте для самой кнопки.

Причина, по которой пример, который я вам даю, работает в вертикальном центре в этом случае, основана на EXAMPLE ONLY CSS, который я вставил вверху - который говорит, что размер шрифта должен быть 12px. Размер браузера по умолчанию (по крайней мере, в Chrome) будет обеспечивать немного дополнительное поле и отступы вокруг кнопки, а также границу, что в результате дает общую высоту примерно 24px, и это выглядит так:

Граница создается также в примере CSS и служит только для того, чтобы показать вам, что вертикальное выравнивание правильное. После удаления .row { border: 1px solid #ccc; } оно исчезнет.

Вот JSBin, который показывает, что он работает:

http://jsbin.com/otekil/1/edit

Answer 2

Устранить это, добавив margin-top:4px к разделу «Создать позицию».Это было единственное решение, которое я смог получить на работе !!

Answer 3

Это будет работать .....

<table style="height:500px;width:100%">
<tr>
<td>
<div style="margin-top:px;vertical-alignment: middle;height: 30px; line-height: 30px;">
              <div style="float:left;">Create new position</div>
              <div style="float:right"><input type="submit" id="x" value="Save"></div>
              <div style="clear: both;"></div>
            </div>
            </td>
            </tr>
            </table>

Answer 4

Я всегда использовал такой трюк:

style="height: 30px; line-height: 30px; vertical-alignment: middle;"

Имея фиксированную высоту плюс ту же высоту, что и высота линии плюс среднее вертикальное выравнивание.

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

Answer 5

Немного другой подход, но вам не нужны поплавки, в этом случае вертикальное выравнивание должно работать нормально. IMO:

<div>
  Create new position:
  <input type="submit" id="x" value="Save" style="vertical-align:baseline;" />
</div>

Answer 6

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

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

Встроенное объявление стиля

<div style="float:left; height:50%; margin-bottom:-55px;"></div>
<div style="clear:both; height:110px; position:relative; width:200px;">
    <div style="float:left">Create new position</div>
    <div style="float:right"><input type="submit" id="x" value="Save"></div>
</div>

Полная HTML-страница ( посмотреть, как она работает ):

<html><head><title>Test Center Div</title>
<style>
  .push_to_center {float:left; height:50%; margin-bottom:-55px;}
  .content {clear:both; height:110px; position:relative;}
</style>
</head>
<body>
    <div class="push_to_center"></div>
    <div class="content" style="width:200px; height:110px;">   
      <div style="float:left;">Create new position</div>
      <div style="float:right;"><input type="submit" id="x" value="Save"></div>
   </div>
</body>
</html>

Чтобы исключить кнопку Сохранить изцентрирование просто переместите его из div, классифицированного как Content (поместите его ранее в поток страниц, если хотите, чтобы оно было выше, и ниже на странице, если вы хотите, чтобы оно было внизу):

Answer 7

Сделайте высоту строки внутреннего div такой же, как высота внешнего div.

Пример:

<div style="margin-top:5px; height: 100px;">
          <div style="float:left; line-height: 100px;">Create new position</div>
          <div style="float:right"><input type="submit" id="x" value="Save"></div>
          <div style="clear: both;"></div>
        </div>

Answer 8

Ниже может помочь вам.

<div align="center">

</div>

Так что это может выглядеть так:

<div align="center">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>