Автоматически вертикально мертвый текст центрирования в DIV

Question

мне нужна ваша помощь,

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

ток:

ожидаемый результат: Вот HTML разметка:

CSS

#alertBox_container { 
    left: 50%; 
    padding: 10px; 
    top: 50%; 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    border: 1px solid #808080; 
    position: relative; 
    color: rgb(11,63,113); 
    background: #FFF; 
    font-family: Arial; 
} 

#alertBox { 
    height: 100px; 
    width: 400px; 
    bottom: 50%; 
    right: 50%; 
    position: absolute; 
} 

#alertBox_titlebar { 
    line-height:24px; 
    width: 100%; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd"); 
    font-weight: bold; 
    font-size: 9pt; 
} 

.alertBox_Button { 
    color: #464646; 
    border: 1px solid; 
    border-color: #999 #666 #666 #999; 
    background-color:#ccc; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7'); 
} 

.alertBox_Button:hover { 
    background-color: #ddd;   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); 
    color: #000000; 
} 

#alertBox_close { 
    line-height: 11px; 
    width: 18px; 

    font-size: 9pt; 
    font-weight: bold; 
    margin: 2px; 
    padding: 1px; 
    position:absolute; 
    top:0px; 
    right:0; 
} 

#alertBox_text_container { 
    width: 100%; 
    height: auto; 
    text-align: center; 
} 
#alertBox_text { 
    font-size: 9pt; 
    width: 100%; 
} 
#alertBox_div_btn_OK { 
    width: 100%; 
    text-align: center; 
    margin: 5px; 
} 

#alertBox_btn_OK { 
    height: 20px; 
    width: 50px; 
    font-size: 9pt; 
} 

HTML

<div id="alertBox"> 
    <div id="alertBox_container"> 
     <div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div> 
     <div><input class="alertBox_Button" id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div> 
     <div id="alertBox_text_container"><div id="alertBox_text">this is some text that should be vertically centered</div></div> 
     </div> 
    </div> 
</div> 

Fiddle http://jsfiddle.net/VuEwu/

Answer 1

Вертикальное центрирование сложно. Это проще всего и наиболее последовательно рассчитывать процент вручную и добавлять соответствующие поля или дополнения. Есть и другие способы сделать это. Я представил четыре метода, о которых я знаю ниже.

CSS

.center-1{ 
    position:absolute; 
    top:50%; 
    width:100%; 
    height:1em; /* need a fixed height for the element */ 
    margin-top:-.5em; /* offset height with negative margin */ 
    text-align:center; 
} 

.center-2{ 
    width:100%; 
    height:100%; 
    display: table-cell;/* IE8+ */ 
    vertical-align: middle; 
    text-align:center; 
} 
.center-3{ 
    width:100%; 
    line-height: 300px;/* height of your container */ 
    text-align:center; 
} 
.center-4{ 
    margin-top:29%;/* manual guess that will scale with the box */ 
    width:100%; 
    text-align:center; 
} 
.container{ 
    height:300px; 
    width:500px; 
    margin:20px; 
    border:1px solid black; 
    position:relative; 
    display: table;/* needed for center-2 */ 
} 

HTML

<div class="container"> 
    <div class="center-1"> 
     Center Me! 
    </div> 
</div> 

<div class="container"> 
    <div class="center-2"> 
     Center Me! 
    </div> 
</div> 

<div class="container"> 
    <div class="center-3"> 
     Center Me! 
    </div> 
</div> 
<div class="container"> 
    <div class="center-4"> 
     Center Me! 
    </div> 
</div> 

http://jsfiddle.net/xSML5/

Answer 2

можно решить с помощью margin-topstyle

#alertBox_text_container { 
    width: 100%; 
    height: auto; 
    text-align: center; 
    margin-top:20px; 
} 

Live Demo

Answer 3

Вот решение: Fiddle.

Основная идея заключается в том, чтобы использовать

display: table-cell 
vertical-align: middle; 

Он не может работать в старых браузерах, которые не поддерживают table-cell значение для css display property. В таком случае here is очень хорошее объяснение и решение этой проблемы в целом.

Answer 4

Я бы взял высоту области, в которой вы хотите центрировать текст, а затем добавьте это число к высоте строки элемента. В этом случае у вас есть 24px-заголовок, оставляя 76px для текстового контейнера. Поэтому добавление:

#alertBox_text_container { 
    line-height: 76px; 
} 

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

Fiddle