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
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical Centering Question

    I'm currently trying to make a div tag of mine horizontally centered. The thing that makes this question a little trickier is that I want it relatively centered in a div that is already floating to the left and inline. Basically I have a left and right box, one is going to hold text and the other an image. I want the left one, that holds text, to be relatively centered. I want it to be setup so that when I add one line, two, or three lines of text that it is always in the middle as far as top and bottom spacing. I don't know if this is possible or not, but I figure that is what these forums are for. It is a difficult question to Google search so hopefully someone can help me out.

    Here is the code I'm using:
    CSS
    Code:
    .container {
    	width: 980px;
    	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    	height: 350px;
    	background-color: #FFF;
    	background-image: url(images/header-hang-Addvantage.jpg);
    	background-repeat: no-repeat;
    	background-position: 2px 90px;
    	vertical-align: baseline;
    	box-shadow: 0 0 8px 2px #13324e;
    }
    
    .header {
    	background-image: url(images/header.gif);
    	height: 91px;
    	padding-right: 10px;
    	padding-left: 10px;
    	margin-left: 2px;
    	margin-right: 2px;
    	background-repeat: repeat-x;
    }
    
    .header-left {
    	display: inline;
    	width: 500px;
    	height: 180px;
    	float: left;
    	text-align: left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 30px;
    	color: #fff;
    	line-height: 1.2;
    	padding-left: 20px;
    }
    
    .header-right {
    	display: inline;
    	width: 48%;
    	float: right;
    	text-align: right;
    }
    HTML
    Code:
    <div class="container">
    <div class="header"></div> <!--header end -->
    
    <div class="header-left">
    	<p>This is going to be the header even when I add a bunch of text I want this needs more text to test</p>
    </div><!-- header-left end -->
            
    <div class="header-right">This is going to be the image</div><!-- header-right end -->
    
    </div><!-- container end -->
    Any comments or ideas are highly appreciated. Thank you for your time.
    Last edited by nickmitchell24; 05-16-2012 at 09:22 PM.

  • #2
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I figured out some help on how to get this aligned, but now I need to figure out how to get another div tag to fit in next to it. I searched on the forums here and found some helpful advice. Granted I edited the code a little to fit the styling, it gave me this code:

    CSS
    Code:
    #bio {
    display:table;
    }
    
    #bio span,#bio q {
    	display:table-cell;
    	vertical-align:middle;
    	width: 500px;
    	height: 180px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 30px;
    	color: #fff;
    	line-height: 1.2;
    	padding-left: 20px;
    }
    
    #bio q {
    min-width:100%; /* in case text is very short */
    }
    HTML
    Code:
    <div id="bio">
    	<span>This is going to be the header even when I add a bunch of text I want this needs more text to test</span>
    </div>
    Now seeing as if I have the display be table-cell it means I can no longer have it set to inline. So do I just make another <div> tag where I set it to inline and have the current coding nested inside of that?

    I figure if I figured out something that works, I'm not going to make all you expert coding do all the work. But I would still appreciate any other ways or easier ways to do this.


  •  

    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
    •