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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    79
    Thanks
    45
    Thanked 0 Times in 0 Posts

    Dunno why cant I do this..

    trying to align the img vertically
    tried line-height, margin 50 50 and also vertical align; middle..
    somebody help please
    here is the code
    preview first https://dl.dropboxusercontent.com/u/...mtl/index.html


    body{margin:0;}
    #wrapper{width:1200px;border:2px dashed black;height:500px;margin:auto;padding:0;}
    #box{border:1px solid green;width:600px;margin-left:50px;height:400px;margin-top:50px;}
    .part{background-color:red;width:300px;height:150px;}
    .part p{float:clear;margin:0;display:inline-block;width:150px;margin-left:10px;}
    .part img{float:left;vertical-align:middle;width:134px;height:133px;vertical-align:middle;}
    .part h1{margin:0;}



    <div id="wrapper">
    <div id="box">
    <div class="part">
    <img src="image.png">
    <h1> Title is here</h1>
    <p> all the text goes here all the and and all the****ing text goes here ust
    testing this freakin mother

    </p>

    </div>
    </div>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello h123er2,
    Have a look at several vertical centering examples.
    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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Maybe it would be easier with just a little margin?
    Code:
    body{margin:0;}
    #wrapper{width:1200px;border:2px dashed black;height:500px;margin:auto;padding:0;}
    #box{border:1px solid green;width:600px;margin-left:50px;height:400px;margin-top:50px;}
    
    .part{
    background: #f00;
    width: 300px;
    height:150px;
    }
    .part img {
    height: 133px;
    width: 134px;
    margin: 8px 0 0;
    float: left;
    /*vertical-align:middle;
    vertical-align:middle; -- this is kind of a text thing. Putting it in twice still won't make it do what you think it does*/
    }
    .part h1 {margin: 0;}
    .part p{
    /* float:clear; --no such thing
    display:inline-block;  --why?
    width:150px; not needed
    margin:0;
    margin-left:10px;  */
    margin: 0 0 0 144px;
    }
    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:

    h123er2 (04-13-2013)

  • #4
    New Coder
    Join Date
    Mar 2013
    Posts
    79
    Thanks
    45
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello h123er2,
    Have a look at several vertical centering examples.
    still not working, mate..
    body{margin:0;}
    #wrapper{width:1200px;border:2px dashed black;height:500px;margin:auto;padding:0;}

    #box{border:1px solid green;width:600px;margin-left:50px;height:400px;margin-top:50px;display:table;}

    .part{background-color:red;width:300px;height:150px;}

    .part p{float:clear;margin:0;display:inline-block;width:150px;margin-left:10px;}

    .part img{display:table-cell;float:left;vertical-align:middle;width:134px;height:133px;}

    .part h1{margin:0;}

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This one might work better for you - http://nopeople.com/CSS%20tips/verti...CSS/page3.html
    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:

    h123er2 (04-13-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
    •