CSS вертикальное выравнивание ничего не делает [дублировать]

Question

CSS вертикальное выравнивание ничего не делает [дублировать]

0

Я пытаюсь выровнять текст в нижней части Div и середины Div. CSS-атрибут vertical-align: text-bottom; кажется, ничего не делает?

У меня есть 3 divs и хотелось бы центрировать div xrLabel1 и другой div xrLabel5, чтобы поместить текст внизу.

Я включил некоторый пример кода.

благодаря

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="format.css"/>
        <title></title>
    </head>
    <body>
        <div class="TopMargin">
            <div class="xrLabel2">xrLabel2</div>
            <div class="xrLabel1">xrLabel1</div>
            <div class="xrLabel5">xrLabel5</div>
        </div>
    </body>
</html>

Файл CSS format.css

.TopMargin
{
position:absolute;
left:0px;
top:0px;
height:92px;
width:650px;
background-color:#808080;
color:#000000;
}

.xrLabel2
{
position:absolute;
left:225px;
top:17px;
height:67px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-middle;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}

.xrLabel1
{
position:absolute;
left:367px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:right;
vertical-align:text-bottom;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}

.xrLabel5
{
position:absolute;
left:75px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-top;
font-family:Times New Roman;font-size:9.75pt;
}

user3122553 20 дек. 2013, в 12:34

Источник

Теги:

html

css3

3 ответа

0

Элементы блока не поддерживают vertical-align как таковое. Вы должны установить атрибут отображения в table-cell. Затем вы можете использовать vertical-align.

http://jsfiddle.net/kuUHV/

F. Müller 20 дек. 2013, в 09:21

-1

Вы можете использовать text-align:center на родительском элементе. И margin-top на дочернем элементе.

<div id="outer"> #text-align:center
  <div class="inner">Radom text </div> # margin-top:__
</div>

Скриншот Демо:

Примечание://Не используйте это для гибкого дизайна - при изменении размера окна элемент останется на том же месте, если элемент станет мало.

Mr. iC 20 дек. 2013, в 09:10

0

это не помещает элемент всегда посередине - он не масштабируется с элементом.
F. Müller 20 дек. 2013, в 11:33
0

@ FMüller, спасибо за указание на это. Упомянул это в записке
Mr. iC 20 дек. 2013, в 12:03

Ещё вопросы

это не помещает элемент всегда посередине - он не масштабируется с элементом.
@ FMüller, спасибо за указание на это. Упомянул это в записке

n1kkou · Accepted Answer · 2013-12-20T10-40-00.000Z

Вам нужно использовать display:table на родительском элементе и display:table-cell; vertical-align:bottom; display:table-cell; vertical-align:bottom; для детей. Пример здесь: http://jsfiddle.net/hAScR/

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