Как выровнять текст по середине элемента с помощью CSS в Twitter Bootstrap?

я используюначальная загрузка оповещения, и это мое сообщение об успехе:

<code><div class="alert alert-success" id="UploadSuccess">
    <a class="close" data-dismiss="alert">×</a>
    <strong>Congrats!</strong> You have successfully did it!.
</div>
</code>

И результат:

Resulting image of above HTML

Как вы увидите, выравнивание текста находится в верхней части<div>, Итак, как бы я выровнял его по центру?

Я пытался использоватьpadding-top а такжеvertical-align:middle но ни одна из них не работает (я получаю тот же результат).

Что мне нужно сделать, чтобы изменить вертикальное выравнивание текста?

Ответы на вопрос(3)

Сделать это проще ;) ! Попробуйте использовать alert-block! Это прекрасно работает с последней версией Bootstrap!

<div class="alert alert-block alert-success" id="UploadSuccess">
    <a class="close" data-dismiss="alert">×</a>
    <strong>Congrats!</strong> You have successfully did it!.
</div>

enter image description here

 13 июн. 2013 г., 09:06
Хорошая идея, извините ^^! Вот ты где !
 12 июн. 2013 г., 16:32
Загрузите изображение в другое место и добавьте ссылку с вашим постом.

Попытка вертикального центрирования текстового текста является распространенной проблемой. Обычно это не сработает на обычных блоках, но вы можете заставить его работать с вертикальным выравниванием:

vertical-align: middle;
display: table-cell;

Однако это не будет работать в IE7 и ниже.

Если вы уверены, что текст, который вы хотите отобразить, вы можете использовать высоту строки, чтобы имитировать эффект следующим образом:

height: 40px;
line-height: 40px; /* same as height */

Этот способ работает через браузер и имеет поддержку вплоть до IE5.5. Если это не вариант, я боюсь, что вам не повезло (это не может быть сделано).

Обратите внимание, что сообщение об ошибке имеет неправильную грамматику, поэтому оно должно быть «Поздравляем! Вы успешно это сделали. & Quot ;.

 coder08 апр. 2012 г., 10:17
@ sg3s-Да, вы правы, и я все еще проверяю предупреждения и, конечно, грамматика плохая. Я буду использовать правильную.
Решение Вопроса

Сделатьline-height Div такой же, какheight из div, например:

#UploadSuccess { height: 20px; line-height: 20px; }

Это будет работать только если у вас есть одна строка текста.

 coder08 апр. 2012 г., 10:10
@ Джеймс-Спасибо за ваш ответ. Это сработало :)

Ваш ответ на вопрос