- This topic is empty.
-
AuthorPosts
-
June 29, 2009 at 2:01 pm #25304liberty79Member
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:47 pm #59882ikthiusMemberJune 29, 2009 at 2:52 pm #59883TheDocMemberCSS
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 #59884liberty79Memberthanks 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 twothe 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 #59893TheDocMemberSorry, 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 #59897liberty79Member"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 #59918liberty79MemberI have to admit, I’ve never used
Code:display:table-cellbefore 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 #59919liberty79Memberused 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 threeJune 30, 2009 at 12:38 pm #59941TheDocMemberThat looks fine to me?
June 30, 2009 at 1:34 pm #59946liberty79Member"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 #59948TheDocMemberPut the <img> inside the <p>.
And maybe float the image left.
June 30, 2009 at 2:01 pm #59950liberty79Memberthat aligns the text with the top of the image.
thought you were onto something there!
July 1, 2009 at 10:49 am #60015liberty79MemberHey Chris….any ideas on this?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.