Блог

Главная - Вопросы по программированию - HTML / CSS — Как мне центрировать ссылку на имя в этом div?

HTML / CSS — Как мне центрировать ссылку на имя в этом div?

#html #css

#HTML #css

Вопрос:

Привет, я пытаюсь оставить изображение в покое и центрировать имя «Тим Хайдекер» в этом div.. http://jsfiddle.net/4huq3 /

Спасибо за помощь.

Комментарии:

1. Центрировать по горизонтали, вертикали или обоим?

Ответ №1:

Обновил вашу скрипку. http://jsfiddle.net/thomas_peklak/4huq3/24 /

 #left {
    width: 228px;
    height: 60px;
    border: 1px solid #000;
}
#left a{line-height:60px}

.icon {
    vertical-align:middle

}

Комментарии:

1. Хорошо, за исключением строки перед Tim.

2. Здесь обновление без строки перед Tim: jsfiddle.net/thomas_peklak/4huq3/46

Ответ №2:

попробуйте добавить vertical-align:middle; в свое .icon правило

Ответ №3:

Что я сделал, так это добавил идентификатор в тег со ссылкой на имя, а затем разместил его. Посмотрите на этот разветвленный jsfiddle:

http://jsfiddle.net/98RhD/10/

Ответ №4:

Вы могли бы использовать абсолютное позиционирование следующим образом:

HTML:

 <div id="left"><a href="..." class="icon"><span>Time Heidecker</span></div>

CSS:

 #left { position: relative; width: 228px; height: 60px; border: 1px solid #000; }
#left span { position: absolute; top: 15px; left: 70px; }

Вам придется повозиться с числами, чтобы получить точное конечное положение центра в соответствии с размером текста и конечного поля и / или, если вы хотите вертикальное центрирование (CSS вверху) или горизонтальное центрирование (CSS слева).

Надеюсь, это поможет!