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

Я кодирую простой портфель. Я разработчик программного обеспечения, поэтому у меня недостаточно знаний в CSS. Я хочу выровнять текст по вертикали подряд. Пример того, что я хочу сделать, это ниже.Как выравнивать текст вертикально CSS

Some Text 1
Some Text 2
Some Text 3

Это то, что я на самом деле есть на данный момент.

 
Some Text 1 
    Some Text 2 
    Some Text 3

Как вы можете видеть, я хочу удалить это пустое пространство (пустое). Я использую тег <p> (абзац), который я написал в CSS.

p { 
    display: inline; 
    color: #888; 
    position: relative; 
    text-shadow: 0 1px 0 rgba(255,255,255, 0.8); 
    text-align: center; 
    padding: 8px 30px; 
    font-family: helvetica, arial, sans-serif; 
    display: inline-block; 
    vertical-align:middle; 
}

Если вы все еще не понимаете вопроса, я разместил снизу снизу. Первая панель отображает то, что у меня есть, а вторая - то, что я хочу сделать. Обратите внимание, что вторая панель спроектирована.

источник

2013-07-01 sensation

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

Два варианта я могу думать с верхней части моей головы:

Быстрая и грязная - используйте таблицу. Если вы собираетесь работать над дизайном, это, как правило, приведет к тому, что вы пройдете.
Используйте два divs, установите их ширину, а в первом используйте что-то похожее на неупорядоченный список - это будет для ваших изображений и всего, что находится справа от изображения. Во втором вы помещаете текст. Эти столбцы вы хотели бы установить позицию: относительный, поплавок: левый, дисплей: встроенный блок

Что это будет выполнять то, что ваши изображения будут находиться в их собственном «поле» и выравнивается по этой коробке. И ваш текст будет в своем «ящике» и выровнен в этом поле. Края ящиков не будут перекрываться, поэтому вам не придется беспокоиться о переменной ширине между отдельными элементами. С границей: 0 на столбцах, это будет иметь визуальное ощущение быть в целом.

источник

2013-07-01 00:30:43 Bardicer

Спасибо, Ник, я думаю, что нет необходимости в решении проблемы. Мне удалось настроить размер стрелочных кнопок на 160 пикселей по ширине. Вы можете проверить изображение ниже. [Готово] (http://s9.postimg.org/lbj2g7o4v/panel_c.png) – sensation

Да, это отлично работает. Просто держите ширину одинаковой, и все будет хорошо. – Bardicer

Я уже сделал это сразу после того, как вы ответите на вопрос. Спасибо за ваши усилия.Что касается таблиц, я собирался это сделать, но, как вы сказали, это грязный способ, даже если я не применяю в качестве дизайнера, я знаю, что это ужасно. О divs, это была одна из моих идей, как только вы ответили, но я не уверен в том, что вы будете сильно помечать в кодировке обертки и коробки. Мне удалось передать решение, установив фиксированный размер в стрелки вправо. – sensation

я думаю, что это то, что вам нужно:

CSS

p { 
    vertical-align:middle; 
}

здесь описание вертикального выравнивания по w3schools.com http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

источник

2013-07-01 00:30:00

Как вы можете видеть, я уже сделал это и попробовал. Не работал. Выравнивание не является решением для этого. – sensation

Вы также можете просто нажать на него, хотя это не самый красивый.

источник

2013-07-01 00:34:14 user2537453

Табулятор - это не очень хорошая идея, и даже если бы я сделал вкладку в текст, в абзаце все равно был бы блеск. – sensation

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

ответ

Смежные вопросы