vertical alignment

[1internet]

e.g. you have a div like:

<div>
<img src="image.jpg" /><p>some text</p>
</div>

 

If the paragraph text is floating next to the image, or even an inline element, how can you have the image vertically aligned in the middle of the div, no matter how much text is in the paragraph?

[Love2c0de]

I don't understand the effect you want.

 

Do you want your image in the middle, with the text still next to it?

 

Regards,

 

L2c.

[savage]

I am guessing he wants to have an image aligned vertically in the middle of a div (thats not a fixed height), that floats to the left, and the <p> float to the right.

 

A fixed height div would be simple, but the question is how to do with not a fixed height div, and that I am not sure. But thought I would try and explain it more for someone to solve

Edited February 14, 2013 by savage

[Jessica]

<style>
#container{
display: table-row;
border: 1px solid red;
}
#container div{
display: table-cell;
vertical-align: middle;
}




</style>
<div id="container">
<div>
<img src="http://forums.phpfreaks.com/public/style_images/4_phpf_logo.png">
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet dolor et turpis blandit dictum. Mauris ut velit odio, tincidunt lobortis risus. Fusce congue ligula vitae elit pellentesque ut mollis elit ullamcorper. Integer vestibulum libero suscipit magna fermentum suscipit ac sed nunc. Nulla facilisi. Fusce sit amet mauris elit, in euismod enim. Aliquam turpis leo, fringilla vitae dignissim non, malesuada ac erat. Nunc tempus libero eget risus commodo eu pellentesque dolor eleifend. Phasellus felis felis, pharetra commodo blandit nec, mollis vel lorem. Suspendisse sed enim magna, in aliquam risus. Aliquam ullamcorper sodales massa, vitae dictum nisl pellentesque ac. Fusce nec enim vel tellus accumsan ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla in augue ut magna vulputate pretium nec sit amet neque.




Suspendisse quis sem enim, a sagittis magna. Nam vulputate dui id urna euismod tempus. Curabitur vel vestibulum quam. Maecenas suscipit libero ultricies ante bibendum et adipiscing nulla consectetur. Nam luctus vulputate sapien ut rhoncus. Ut condimentum, nibh non tincidunt ullamcorper, risus nisl sollicitudin elit, non posuere velit enim in erat. In tempus ipsum quis sapien porttitor faucibus. Nunc facilisis, dui nec varius interdum, tellus enim sodales nisi, semper mattis lorem massa nec enim. Aliquam quis urna eros. Phasellus eu arcu nibh. Ut sed erat quis nibh suscipit accumsan a a tellus. Mauris congue turpis non eros congue eu consectetur neque pellentesque. Curabitur pellentesque elementum augue, in luctus ipsum porttitor eu. Suspendisse sagittis quam eget eros ultrices iaculis. Integer non lorem eros. Mauris dolor ligula, luctus id ultricies non, interdum feugiat lectus.




Integer id arcu non nisi ornare aliquet. Morbi erat ante, porta vel auctor at, molestie ut lectus. Nulla nisi odio, auctor quis lobortis et, suscipit id libero. Donec sit amet sollicitudin justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam facilisis enim vel nibh scelerisque ut tincidunt leo bibendum. Etiam adipiscing elit odio, in rhoncus purus. Suspendisse non turpis vel lectus semper ullamcorper ut non risus. Vestibulum laoreet placerat quam, eget bibendum ipsum feugiat quis.




Pellentesque ullamcorper mollis nisi, ac semper tortor euismod eu. Sed commodo ipsum sagittis erat tincidunt dignissim. Cras vel fermentum nibh. Nulla vel commodo eros. In vel libero velit, vel vulputate nisi. Curabitur ac diam eget enim rhoncus rutrum. Aenean imperdiet imperdiet pellentesque. Nunc egestas elementum mauris mollis fermentum. Aliquam eu justo consequat odio interdum consequat vel nec arcu. Fusce diam quam, bibendum ac eleifend vitae, convallis quis erat. Proin nunc lectus, luctus nec dignissim sagittis, placerat vitae justo. Cras eu arcu quam, et semper tellus. Phasellus vel erat lorem.




Vestibulum risus felis, venenatis at tincidunt quis, elementum at metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit arcu sed nunc luctus dignissim posuere nulla faucibus. Quisque porttitor placerat ligula sed pretium. Aenean eros elit, convallis vitae volutpat ac, mollis eu orci. Ut sit amet libero mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id dolor nunc. Proin vestibulum eros ac neque posuere aliquet. Donec sit amet sagittis tellus. Praesent auctor sagittis ante, quis venenatis quam varius a. Cras egestas gravida eros vitae mattis. Nullam ac erat a lorem lobortis cursus. Sed tempus, urna et interdum aliquam, orci lorem scelerisque leo, vehicula pellentesque sapien velit sit amet enim. Duis quis libero quis nisi pretium imperdiet.
</p>
</div>
</div>

 

*shrug*. 

[1internet]

Sorry for the ambiguity, I was struggling to explain it. So to align something in the middle horizontally, you use

margin-right: auto;
margin-left: auto;

How would you create the same effect vertically?

[tibberous]

<table><tr><td style='height:100px' valign='middle'>This is the middle.</td></tr></table>

 

Theres some shitty hacks you can do to get it to work with divs, but since tables have had vertical align for the last 15+ years, I'd just use them.

[Frank P]

Standby, the tutorial How to Center Vertically in CSS is nearing its release.

[1internet]

So there isn't really any clever way, at least using only css, unless you use a table?

[Jessica]

Uhm. I posted one.

[savage]

Yes Jessica's does work. it tells the divs to act as table rows/cells so you can use "vertical-align: middle;"

[Frank P]

The tutorial is online: How to Center Vertically in CSS. Five -- intuitive and valid -- techniques and a flowchart to determine which technique is (the only one) possible for your case. Let me know what you think of it, please.

[savage]

The tutorial is online: How to Center Vertically in CSS. Five -- intuitive and valid -- techniques and a flowchart to determine which technique is (the only one) possible for your case. Let me know what you think of it, please.

 

it is a very good tutorial, like the flowchart, it's not for beginners though because of the "technical" words used, and I would think they might click away instantly. also the menu on the left following you down the page is really annoying! (sorry!) and the red title heading is quite hard to read. and when you click on "these web design forums" the background image/pattern doesn't quite work. And I might extend "tuts" to tutorials. but the background looks awesome. and you could put some ads on there for cash. just my thoughts

[Frank P]

Thanks for the speedy and thorough feedback, Savage!

 

it is a very good tutorial, like the flowchart, it's not for beginners though because of the "technical" words used, and I would think they might click away instantly.

You're right, but it is not intended for beginners. I don't mind if they click away to a beginner's course, to which I am actually directing them first if they do not have a basic knowledge of HTML and CSS. How would you rate the content on a scale from 0 - 10, assuming visitors have done such a course?

 

also the menu on the left following you down the page is really annoying! (sorry!)

It would be interesting to see what a visitor poll for these pages would say, but generally, people like to have the nav menu fixed. This one is semi-fixed.

 

and the red title heading is quite hard to read. and when you click on "these web design forums" the background image/pattern doesn't quite work. And I might extend "tuts" to tutorials. but the background looks awesome.

Have a look now, if you will. Apart from the popup with forums I made alterations accordingly. Have yet to think of something nice for the popup.

 

 

and you could put some ads on there for cash. just my thoughts

Nah, too much hassle and not enough visitors for any serious money. It ain't a site for the general public.

[savage]

Thanks for the speedy and thorough feedback, Savage!

 

 

You're right, but it is not intended for beginners. I don't mind if they click away to a beginner's course, to which I am actually directing them first if they do not have a basic knowledge of HTML and CSS. How would you rate the content on a scale from 0 - 10, assuming visitors have done such a course?

 

 

It would be interesting to see what a visitor poll for these pages would say, but generally, people like to have the nav menu fixed. This one is semi-fixed.

 

 

I think 6 out of 10. I would read it and it would have helped me if I needed it, although you may want to include snippets of the code example in the actual article to demonstrate further the difference between the code required.

 

and yea I think fixed menu's are better, as a visitor I know where the menu is because I saw it when I landed on the page, so I don't really need it to follow me down the page, you could just extend the menu a lot, with a header for each social media website, such as "like this article? add me on linkedin.." then underneath have your linkedin profile, and connect button, and then same for facebook/twitter, under their own headings, as although your little icons are massively cute, I doubt you get a lot of clicks. (but you may do, I am just assuming).

 

Have a look now, if you will. Apart from the popup with forums I made alterations accordingly. Have yet to think of something nice for the popup.

 

yes, the title with white background looks alot better in my opinion.

[Frank P]

OK. I moved the whole About section to the bottom of the page. I assume that folks who want to know about me are smart enough to look there. And that is a much better place for the sharing icons, too.

 

Regarding the menu: with 'fixed' I meant fixed to the viewport, not to the page. Some tutorials are really long, in which case I think people would find it handy to not have to scroll all the way back up to go to another page.

 

With respect to including code snippets on the page itself: in this case that is only useful if you also get the HTML. I would have done that if it would have been a tut that people read often. But vertical centering is rarely a question on forums. Much less than the topics of the other tuts. Also, I would think that people will primarily use the tut as a problem solver, which means that they will look up the technique most suited for their problem on the flowchart, look at that source code and hardly look at the rest.

 

I did also change the background of the forums pop-up, but furthermore am going to leave it as it is now. Nonetheless, your feedback has been really valuable. Thanks again!

[savage]

OK. I moved the whole About section to the bottom of the page. I assume that folks who want to know about me are smart enough to look there. And that is a much better place for the sharing icons, too.

 

Regarding the menu: with 'fixed' I meant fixed to the viewport, not to the page. Some tutorials are really long, in which case I think people would find it handy to not have to scroll all the way back up to go to another page.

 

With respect to including code snippets on the page itself: in this case that is only useful if you also get the HTML. I would have done that if it would have been a tut that people read often. But vertical centering is rarely a question on forums. Much less than the topics of the other tuts. Also, I would think that people will primarily use the tut as a problem solver, which means that they will look up the technique most suited for their problem on the flowchart, look at that source code and hardly look at the rest.

 

I did also change the background of the forums pop-up, but furthermore am going to leave it as it is now. Nonetheless, your feedback has been really valuable. Thanks again!

 

 

background popup is much better! and the about move change is good especially for the social media agree with you there, good luck with the article/site!