I could really use your assistance.
How can I align the text in my customized alert box vertically?
I assumed that by utilizing the following CSS properties:
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
margin-top: 10px;
}
The text would automatically 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>