Results 1 to 4 of 4

Thread: H and V centered div

  1. #1
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default H and V centered div

    Hello!
    Hope someone can help me.

    I have this (The image is H and V Centered):


    But I need this:


    PHP Code:
    <style>
    div.album1 {
    padding-left:auto;
    padding-right:auto;
    height:120px
    width:120px
    background-colorgreen
    text-align:center;
    vertical-align:middle;
    }
    div.album2 {
    height:100px
    width:100px
    background-colorblue
    display:table-cell
    position:relative
    vertical-align:middle;
    }
    </
    style>

    <
    div class="album1">
    <
    div class="album2">
    <
    img src="1.jpg">
    </
    div>
    </
    div
    Thanks!!!
    Last edited by traucostar; 05-19-2009 at 05:21 AM.

  2. #2
    Join Date
    May 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    use align:center in the class div.album2. it is here..

    Code:
    <style>
    div.album1 {
    padding-left:auto;
    padding-right:auto;
    height:120px; 
    width:120px; 
    background-color: green; 
    text-align:center;
    vertical-align:middle;
    }
    div.album2 {
    height:100px; 
    width:100px; 
    background-color: blue; 
    display:table-cell; 
    position:relative; 
    vertical-align:middle;
    align:center;
    }
    </style>
    
    <div class="album1">
    <div class="album2">
    <img src="1.jpg">
    </div>
    </div>

  3. #3
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It doesnt work....

  4. #4
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    Try this, you probably need to experiment with the 'top' and 'vspace' values.

    PHP Code:
    <style>
    div.album1 {
    padding-left:auto;
    padding-right:auto;
    height:120px
    width:120px
    background-colorgreen
    text-align:center;
    }
    div.album2 {
    height:100px
    width:100px;
    position:relative;
    top:10px;
    background-colorblue
    display:table-cell;
    }
    </
    style>

    <
    div class="album1">
    <
    div class="album2">
    <
    img src="1.jpg" vspace="10">
    </
    div>
    </
    div

Bookmarks

Posting Permissions

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