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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Vertical Center text in a div

    I am trying vertical center my text in a div but it always float at top in div. I also tried using a span inside the div and apply css on span but it too not works. I used this css property (vertical-align:middle)

    This is Html

    Code:
    <div id="topsmallmenucontainer">
    <div class="topmenuleft"></div>
    <div class="topmenumiddle"><span> Thhis is text inside div</span></div>
    <div class="topmenuright"></div>
    <div class="clearBox"></div>
    </div>

    This is CSS

    Code:
    #topsmallmenucontainer
    {
    	width:406px;
    	height:41px;
    	position:absolute;
    	top:53px;
    	right:30px;
    }
    .topmenuleft 
    {
    	width:7px;
    	height:41px;
    	float:left;
    	position:relative;
    	background-image: url(../images/top_small_menu_left.png);
    	background-repeat: no-repeat;
    	background-position: 0 0;
    }
    .topmenumiddle 
    {
    	width:393px;
    	height:41px;
    	position:relative;
    	float:left;
    	background-image: url(../images/top_small_menu_middle.png);
    	background-repeat: repeat-x;
    	background-position: 0 0;
    	vertical-align:middle;
    	color:#FFF;
    }
    
    .topmenuright 
    {
    	width:6px;
    	height:41px;
    	position:relative;
    	float:left;
    	background-image: url(../images/top_small_menu_right.png);
    	background-repeat: no-repeat;
    	background-position: 0 0;
    }
    .clearBox
    {
    	clear:both;	
    }
    This is output div snap

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello eetec,
    A single line of text is easy to vertically centered with line-height, like this -
    Code:
    .topmenumiddle {
    	width: 393px;
    	line-height: 41px;
    	float: left;
    	position: relative;
    	/*vertical-align: middle;*/
    	color: #fff;
    	background: url(../images/top_small_menu_middle.png) repeat-x 0 0;
    }
    vertical-align
    line-height

    It gets more complicated if you want to center a paragraph or div element. See some vertical center examples here.
    My favorite is the last one which uses a float and a clear.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    eetec (12-26-2012)

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excavator,

    This answer is very helpful for me.
    Thank You.


  •  

    Tags for this Thread

    Posting Permissions

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