Как выровнять текст внутри div

#html #css

#HTML #css

Вопрос:

Я новичок в HTML / CSS и провел последний час, пытаясь сделать что-то, что, по-видимому, выше моего понимания. Я пытался переместить текст в div немного вверх, чтобы он был выровнен с некоторыми изображениями.

http://jsfiddle.net/xE2qJ

 <div class='social-media-button'> <a href='www.facebook.com/#' target='_blank'><img border='0' src='http://www.niftybuttons.com/authentic/color-square/facebook.png'/></a> Hello <a href='www.youtube.com/#' target='_blank'><img border='0' src='http://www.niftybuttons.com/authentic/color-square/youtube.png'/></a> </div>

Как я могу этого добиться?

1. Вы можете использовать свойство margin для выравнивания текста по своему усмотрению

2. Вы знаете то предупреждение, которое вы видели о публикации кода при ссылке на jsFiddle? Да … это.

3. w3.org/wiki/CSS/Properties/vertical-align

4. Не мог бы кто-нибудь из вас опубликовать jFiddle с вашим предложением в действии?

5. @user3745387 Я удалил теги javascript, blogger и blogspot blogspot поскольку они не имеют никакого отношения к вопросу.

Ответ №1:

Вы можете решить это с помощью

отображение: встроенный: блок

выравнивание по вертикали

HTML (я обернул ваш текст в пределах диапазона):

 <span>Hello</span>

CSS:

a, span {выравнивание по вертикали: по центру; отображение: встроенный блок;}

ДЕМОНСТРАЦИЯ: http://jsfiddle.net/xE2qJ/1 /

Ответ №2:

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

Другим вариантом может быть проверка высоты изображений и установка line-height height на это значение.

1. Вам не нужно использовать <table> теги, чтобы воспользоваться преимуществами ячеек таблицы, вы можете использовать display:table и display: table-cell по мере необходимости.

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

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

4. Это правильно, если вы используете его для создания макета страницы. Однако в большинстве сред вы пока не можете полагаться на функции Html5. в любом случае — способ lineheight height — это вариант, который я бы выбрал для решения этой проблемы