Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #25304
    liberty79
    Member

    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

    #59882
    ikthius
    Member
    #59883
    TheDoc
    Member

    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.

    #59884
    liberty79
    Member

    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;
    }

    #59893
    TheDoc
    Member

    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>

    #59897
    liberty79
    Member
    "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.

    #59918
    liberty79
    Member

    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]

    #59919
    liberty79
    Member

    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

    #59941
    TheDoc
    Member

    That looks fine to me?

    #59946
    liberty79
    Member
    "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]

    #59948
    TheDoc
    Member

    Put the <img> inside the <p>.

    And maybe float the image left.

    #59950
    liberty79
    Member

    that aligns the text with the top of the image.

    thought you were onto something there!

    #60015
    liberty79
    Member

    Hey Chris….any ideas on this?

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.