Vertically centering the text in a div

Question

I need your help,

How can the text be vertically centered in my custom alert box.

I thought that by having the existing css properties of:

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

That it would automatically appear to be centered.

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
/*--------------------------------------------------------------------------------------------------
    CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#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);
    font-family: Arial;
    background: #FFF;
    visibility: hidden;
}
#alertBox {
    height: 100px;
    width: 400px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    font-size: 9pt;
}
#alertBox_titlebar {
    line-height:24px;
    width: 100%;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
    font-weight: bold;
}
.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: 10px;
    width: 18px;

    font-size: 8pt;
    font-weight: bold;

    margin-top: 2px;
    margin-right: 2px;
    padding-top: 2px;
    position:absolute;
    top:0;
    right:0;
}

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

</style>

<script type="text/javascript">
/*--------------------------------------------------------------------------------------------------
    CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
function alertBox(text, type) {

    if (type == "err") {
        document.getElementById('alertBox_text').style.color = "#FF0000"
        document.getElementById('alertBox_div_btn_OK').innerHTML = "<input class='alertBox_Button' id='alertBox_btn_OK' type='button' value='OK' onclick='alertBox_hide()'>"
    }
    else if (type == "sucess") {
        document.getElementById('alertBox_text').style.color = "#008000"
        document.getElementById('alertBox_div_btn_OK').innerHTML = "<input class='alertBox_Button' id='alertBox_btn_OK' type='button' value='OK' onclick='alertBox_hide()'>"
    }
    else if (type == "ok") {
            document.getElementById('alertBox_div_btn_OK').innerHTML = "<input class='alertBox_Button' id='alertBox_btn_OK' type='button' value='OK' onclick='alertBox_hide()'>"
    }

    document.getElementById('alertBox_text').innerHTML = text

    document.getElementById('alertBox_container').style.visibility = 'visible'


}
function alertBox_hide() {

    document.getElementById('alertBox_container').style.visibility = 'hidden'

}


</script>

</head>

<body onload="alertBox('testing the system')">

<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"></div>
        </div>
    </div>
</div>

</body>

</html>

Answer 1

Text-align only applies to horizontal alignment.

If you wish to vertically align text and you know your container's height, you can use the line-height property to vertically align single-line text by setting it equal to the height.

Alternatively, use one of the techniques documented here: http://css-tricks.com/centering-in-the-unknown/

Vertically centering the text in a div

Question

1 answers

solution1
2 ACCPTED 2013-10-10 20:50:16

Vertically centering the text in a div

Question

1 answers

solution1 2 ACCPTED 2013-10-10 20:50:16

solution1
2 ACCPTED 2013-10-10 20:50:16