Выровнять текстовую линию с помощью кнопки в CSS

Question

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

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

Answer 1

Вы можете использовать: line-height!

.box {
  color: #fff;
  background: #444;
  height:      40px;  
  line-height: 40px; /* Same as height  */
}

<p class="box">some text <input type="button" value="Button" /></p>

набор для родителя кнопки,
где, как видите, line-height соответствует элементу height
и выровняет оба текста в центре элемента (p). В противном случае кнопка, являющаяся по умолчанию элементом inline, подвергается манипуляциям с использованием свойства CSS vertical-align:, которое в основном выравнивает все элементы * inline ** по вертикали внутри элемента уровня block , используя эти термины типографики. :

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
vertical-align: 10em;  
vertical-align: 4px;
vertical-align: 20%;

*_{https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align}

точно, вы даже можете вручную настроить выравнивание, используя PX / -PX и %

Я столкнулся с некоторыми проблемами при использовании высоты строки в браузерах Android (), поэтому иногда правильным решением было поиграть с родительским отступом * и выравниванием по вертикали, а не внутренним выравниванием детей (с высота строки).

* _{(примечание: отступ для блочных элементов более согласован, чем (верх, низ), используемый для внутренних встроенных элементов.)}

Answer 2

Я думаю, что вы после того, как vertical-align: text-bottom;

http://jsfiddle.net/EQgFF/3/