Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    183
    Thanks
    139
    Thanked 0 Times in 0 Posts

    Vertically centering text in a div

    Hello,

    I need your help,

    How can the text be vertically centered in my custom alert box (in the white part of the box only)

    This seems like a near impossible thing to do =\

    Much thanks and appreciation for all your help.

    Cheers,

    Jay

    Code:
    <!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;
    
        font-size: 8pt;
        font-weight: bold;
    
        margin-top: 2px;
        margin-right: 2px;
        padding: 2px;
        position:absolute;
        top:0;
        right:0;
    }
    
    #alertBox_text {
    	width: 100%;
    	height: auto;
    	text-align: center;
    	display: inline-block;
    	vertical-align: middle;
    	top: -50%;
    	
    
    }
    
    </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>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    If the text is always the same, you can apply a padding-top to the div that has the text. This will increase the height of the div by that amount so you need to compensate.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    jason_kelly (10-11-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •