Forums

liberty79

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.

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

Is there an accepted way to do this?



<div>
      <img src=\"image.jpg\" />
       <p>Line of text</p>
       <p>Line of text, again</p>
</div>

ikthius

http://www.w3schools.com/css/tryit.asp? ... ical-align
http://www.w3schools.com/css/css_text.asp

TheDoc

CSS

.divname p {
   vertical-align:middle;
}

HTML

<div class=\"divname\">
<img />
<p>This is the first line<br />
This is the second<br />
And so on.</p>
</div>

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

liberty79

thanks for the replies!

Doc, unfortunately, that doesn't work.

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

<div class=\"contain\">
	<img src=\"images/newprofiles/image.jpg\" />
	<p>Line of text one<br />
	line of text two</p>
</div>

the css

.contain {
background-color: blue;
}

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


.contain p {
vertical-align:middle;
}

TheDoc

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

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>

liberty79

"TheDoc" said:
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.

liberty79

I have to admit, I've never used

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 :?

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

liberty79

used for above image:

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

.contain img {
float:left;
}

<div class=\"contain\">
		<img src=\"images/newprofiles/image.jpg\" />
		<p>Line of text one<br />
	   Line of text two<br />
	   Line of text three<br />
    	</p>
</div>

TheDoc

That looks fine to me?

liberty79

"TheDoc" said:
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

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

TheDoc

Put the <img> inside the <p>.

And maybe float the image left.

liberty79

that aligns the text with the top of the image.

thought you were onto something there!

liberty79

Hey Chris....any ideas on this?

treehouse : what would you like to learn today?

Forums

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