Grow your CSS skills. Land your dream job.

middle vertical alignment of image and text – 1 or more line

  • # June 29, 2009 at 2:01 pm

    hello!

    I’ve run into this problem multiple times and always give up and take the long, more manual way out. I would LOVE to solve this for once and for all.

    I’m trying to horizontally align an image and text next to each other….no problem there.

    I would like the text to align middle vertically, regardless of how many lines of text there are. Not so easy.

    [img]http://i762.photobucket.com/albums/xx262/ontheellipse/test.jpg[/img]

    Is there an accepted way to do this?

    Code:

    Line of text

    Line of text, again

    # June 29, 2009 at 2:52 pm

    CSS

    Code:
    .divname p {
    vertical-align:middle;
    }

    HTML

    Code:

    This is the first line
    This is the second
    And so on.

    I don’t think you’ll be able to use multiple "<p>" tags and have it work, but I haven’t tried it.

    # June 29, 2009 at 3:11 pm

    thanks for the replies!

    Doc, unfortunately, that doesn’t work.

    [img]http://i762.photobucket.com/albums/xx262/ontheellipse/photo2.gif[/img]

    Code:

    Line of text one
    line of text two

    the css

    Code:
    .contain {
    background-color: blue;
    }

    .contain img {
    float:left;
    margin-right:10px;
    }

    .contain p {
    vertical-align:middle;
    }

    # June 29, 2009 at 5:05 pm

    Sorry, you are correct! I should really test things before telling other people to do them!

    http://www.w3.org/Style/Examples/007/center#vertical

    Quote:
    CSS level 2 doesn’t have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

    The example below centers a paragraph inside a block that has a certain given height. A separate example shows a paragraph that is centered vertically in the browser window, because it is inside a block that is absolutely positioned and as tall as the window.

    DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }

    <DIV class="container">
    <P>This small paragraph…
    </DIV>

    # June 29, 2009 at 6:43 pm
    "TheDoc" wrote:
    Sorry, you are correct! I should really test things before telling other people to do them!

    I don’t think so…just suggesting is more than appreciated.

    Thanks for the above, I’m going to give it a shot in the morning.

    # June 30, 2009 at 9:26 am

    I have to admit, I’ve never used

    Code:
    display:table-cell

    before and I’m not sure exactly how to use it.

    I can get the above to align the first line of text to align vertically-middle, but the first line of text aligns vertically, but it doesn’t shit up when more lines are added.

    i’m going from being curious to pulling my hair out…you know the feeling :?

    [img]http://i762.photobucket.com/albums/xx262/ontheellipse/text.gif[/img]

    # June 30, 2009 at 9:27 am

    used for above image:

    Code:
    .contain {
    background-color: blue;
    display: table-cell;
    height:60px;
    vertical-align: middle;
    width:500px;
    }

    .contain img {
    float:left;
    }

    Code:

    Line of text one
    Line of text two
    Line of text three

    # June 30, 2009 at 12:38 pm

    That looks fine to me?

    # June 30, 2009 at 1:34 pm
    "TheDoc" wrote:
    That looks fine to me?

    the top line is starting at vertical-middle, but adding lines of text is dropping under. working would look like

    [img]http://i762.photobucket.com/albums/xx262/ontheellipse/working.gif[/img]

    # June 30, 2009 at 1:52 pm

    Put the <img> inside the <p>.

    And maybe float the image left.

    # June 30, 2009 at 2:01 pm

    that aligns the text with the top of the image.

    thought you were onto something there!

    # July 1, 2009 at 10:49 am

    Hey Chris….any ideas on this?

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".