Need help vertically aligning in DIV

Discussion in 'HTML & Website Design' started by wanderlusion, Mar 28, 2014.

0
  1. #1
    Hey can anyone help me? So I have this DIV inside of a DIV and I want the content in the second DIV to align vertically. Here's an example of the html:

    <div id="header-index">
    <div id="header-description">
    <img src="images/logo-index.png" alt="Chris Tarampi | Designer">
    <h2 class="header-1">Hi there, I’m Chris Tarampi</h3>
    <p class="header-2">and I’m a creative, visual, and interactive designer. </p>
    </div><!-- End of "header-description" -->
    </div><!-- End of "header-index" -->

    The CSS for the DIVS are:
    #header-index{
    width: 100%;
    position: relative;
    height: 519px;
    background-image:url(images/header-index.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    }

    #header-description {
    width: 760px;
    margin: auto;
    display:block;
    text-align: center;
    padding-top:60px;
    }
     
    wanderlusion, Mar 28, 2014 IP
  2. deemainer

    deemainer Active Member

    Messages:
    351
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    78
    #2
    Is this what you mean?

    <body><divid="container"><divid="content"><h1>Centered div</h1></div></div></body>

    #container{
    position: absolute;
    top: 50%;
    margin-top: -200px;/* half of #content height*/
    left: 0;
    width: 100%;
    }
    #content {
    width: 624px;
    margin-left: auto;
    margin-right: auto;
    height: 395px;
    }
     
    deemainer, Mar 28, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Generally speaking you're trying to do two things you shouldn't EVER plan on doing in a layout. Fixing the height of a major content section full of text, and vertically aligning it.

    If you want spacing I'd pad the top and bottom of the outer wrapping DIV, and NOT fix the height of any of that. You've got way too much text (that should probably be dynamic in size and auto-adjusting in both width AND height) to be dicking around with fixed sizes.

    ... well, unless your making one of those buggy broken inaccessible fixed width layouts that only PSD jockeys and ignorant fools are dumb enough to still be making in the age of responsive layout!
     
    deathshadow, Mar 28, 2014 IP
  4. imbrod

    imbrod Well-Known Member

    Messages:
    212
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #4 
    
#header-index {
   display: table;
}
#header-description {
   display: table-cell;
   vertical-align: center;
}
    Code (markup):
     
    imbrod, May 2, 2014 IP