How I should vertically align like this?

HTML & CSS
1

Hi guys.

First of all, sorry for my bad english & possible mistakes. Then…

I’m beginner in web designing and I want to have something like the attached image…vertically aligned I mean.

I wrote something like this :
http://codepen.io/Moh3eN/pen/faxur

And as you can see, it’s not what I want.
What should I do now ?

I appreciate your helps.

Thank you :).

2

Hi okey. Welcome to the forums. :slight_smile:

I’m not the greatest expert on this, but here’s one way to approach it:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

.teamMembers {width: 960px; margin: 0 auto;}
.teamMembers section {display: table; table-layout: fixed; border-spacing: 10px;}
.teamMembers section div {display: table-cell; vertical-align: middle; }
h4 span {display: block;}
.name {width: 100px; text-align: right;}
.info {width: 180px; text-align: center;}
.image {width: 150px;}
.text {width: 530px;}
</style>
</head>
<body>

<div class="teamMembers clear">
	
		<section>
			<div class="name">
				<h4>John Doe<span>CEO</span></h4>
			</div>
			
			<div class="info">
				<p>Some Information</p>
			</div>
			<div class="image">
				<img src="#" width="150" height="150" alt="proper description" title="proper description">
			</div>
			<div class="text">
				<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
			</div>
		</section>

	</div>

</body>
</html>
3

Hi ralph & Thank you for sharing your knowledge. I learned a lot from your post.
You’re Great man…

And I appreciate if anyone has another ways to do this. So I could learn more…

cheers.

4

Here’s another way that should work back to IE6 (with any luck).


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style media="all">
.teamMembers {
	width: 960px;
	margin: 0 auto;
}
h4.tm span { display: block; }
.teamMembers p { margin:0 }
.name {
	width: 100px;
	text-align: right;
}
.info {
	width: 180px;
	text-align: center;
}
.image {
	border:1px solid #000;
	border-radius:50%;
	margin:0 10px;
}
.text { width: 490px; }
.tm {
	display:inline-block;
	vertical-align:middle;
 *display:inline;/* ie6/7 inline-block hack */
 *zoom:1.0;/* ie6/7 inline-block hack */
}
</style>
</head>
<body>
<section class="teamMembers">
		<h4 class="tm name">John Doe<span>CEO</span></h4>
		<p class="tm info">Some Information</p>
		<div class="tm "><img class="tm image" src="http://placehold.it/150x150" width="150" height="150" alt="proper description" title="proper description">
				<p class="tm text"> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
		</div>
</section>
</body>
</html>

Ralph’s method is more flexible and robust but support is only only IE8+ and requires slighlty more html.

5

Oss Sensei :smiley:
Thank you Paul for your answer. It works great too + it has wider range of support for older browsers & That’s good point…

Thanks again for your helps guys.

6

Hello again.

Sorry but here’s another question…

Some days ago I wanted to write something like this :

But I couldn’t write correct code so I changed my mind & I styled my training page’s navigation this way :

Yesterday & after dear ralph.m solution, thought I can style navigation as I want using the display:table & table-cell.
It works generally but there are some problems there with borders & center-aligned nav, etc :

Now I’m looking for your helps.

Thanks.

7

Hi,

If you remove the margins from the h1 the gap will reduce and if you set the uls to 50% width they will become even spaced.

e.g.


.pageHeader {
	width: 960px;
	margin: 0 auto;
}
.pageHeader nav.container {
	display: table;
	table-layout: fixed;
	border-spacing:20px;
}
nav.container ul {
	list-style: none;
	display: table-cell;
	vertical-align: middle;
	padding: 0;
	margin:0;
	width:50%;
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
}
nav.container ul li { float: left; }
nav.container li a {
	display: block;
	text-decoration: none;
	color: gray;
	padding: 0px 15px;
	-o-transition: color .75s ease 0s;
	-webkit-transition: color .75s ease 0s;
	transition: color .75s ease 0s;
}
nav.container li a:hover { color: black; }
.pageHeader h1 a {
	font-size: 1.3em;
	color: #64b0a3;
	text-decoration: none;
	text-shadow: 1px 1px 10px #54d1b6;
}
.container h1 {
	margin:0;
	display:table-cell;
}
.container ul:first-child li { float:right }

I set the first ul to float right so you would need to change the order of the html for that first one.

1 Like
8

Thank you so much dear Paul.
I’m so glad to find this forum & to become familiar with you guys.