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

Question

У меня есть <div> в <li>. В Div это текст, размер этого текста меняется.

HTML:

<li id="button_welcome"><div>Welcome</div></li>

CSS:

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
}
#about_nav li div{
    text-align:right;
    margin-right:10px;
    vertical-align:middle;
}

как мне заставить текст оставаться в середине <li>?

P.S. У меня есть <li> градиентный фон, но я удалил его, потому что он громоздкий.

развеселить,

Fraser

Answer 1

ОБНОВЛЕНИЕ

Если вы хотите использовать градиент для фона, вы можете попробовать способ CSS;проверьте скрипку ...

http://jsfiddle.net/UnsungHero97/F5FEg/1/

Вместо этого, если вы хотите использовать изображение, это не должно влиять на расположение текста, поскольку это фоновое изображение.,Если вы получили какое-то странное позиционирование, обновите свой вопрос и покажите нам, в чем именно проблема с кодом / скриншотами / скрипкой.

---

Дайте ему line-height такой же высоты, как <li> ...

#about_nav li div{
    text-align:right;
    margin-right:10px;
    line-height: 48px; /* as tall as the li */
}

Вертикальное выравнивание - сложное дело.Взгляните на эту статью о том, как лучше понять, как работает vertical-align и как все выравнивать по вертикали в целом ...

http://phrogz.net/CSS/vertical-align/index.html

Надеюсь, это поможет.
Христо

Answer 2

Волшебство состоит в том, чтобы использовать имитацию макета таблицы с помощью css

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
    display:table-row;
}
#about_nav li div{
    text-align:right;
    margin-right:10px;
    vertical-align:middle;
    display:table-cell;    
}

Answer 3

Мне нравится Христос, много отвечаю =) Вот другое решение:

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
    border:1px solid;
}
#about_nav li div{
    height:inherit;
    width:inherit;
    padding-right:10px;
    display: table-cell;
    text-align:right;
    vertical-align: middle;
    border:1px solid;
}

Если вы установите высоту и ширину div, вы можете использовать свойство вертикального -align

См. Пример: http://jsfiddle.net/3asEN/

Answer 4

Сделайте высоту строки такой же, как и высоту.Размер шрифта должен быть меньше высоты.

<style>
    #my_div{
        height: 30px;
        line-height: 30px;
        font-size: 10px;
        border: 1px solid black;
        width: 200px;
        text-align: center;
    }    
</style>
<div id="my_div">My DIV</div>

Answer 5

Добавить выравнивание текста: по центру; в div или li.