Can i solve this vertical-centering issue with JS? (JS noob)

JavaScript
1

I have done this fiddle, where I’m trying to solve it with CSS, but it doesn’t seem to work out.

The thing I want to do is have the paragraph beeing vertically centered. The parents height depends on the height of the image, which is responsive. I have tried table, table-cell but it is not working out for me.

I guess you could use javascript to estimate the height of the paragraph then put margin-top: - half that amount, the thing is I don’t know how to do this.

Would be really grateful for help with this=)

2

HI,

I think we’ve answered this same question about 4 times now :slight_smile:

Here’s another version.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body, html, p {
	padding: 0;
	margin: 0;
}
.parent {
	width: 100%;
	background: #eee;
	overflow: hidden;
}
.parent img {
	width: 49%;
	vertical-align:middle;
	display:inline-block;
}
.parent p {
	display: inline-block;
 *display:inline;/* ie7 hack for inline-block remove if not supported*/
 *zoom:1.0;/* ie7 hack for inline-block remove if not supported*/
	vertical-align: middle;
	width:49%;
}
</style>
</head>

<body>
<div class="parent"> 
		<img src="http://placehold.it/350x150" />
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et odio est. Suspendisse pulvinar blandit urna, a adipiscing est porttitor nec. </p>
</div>
</body>
</html>
3

hehe hmm I think there is a slight difference between my topics at least=) Considering i couldn’t solve this issue with the solution for the other centering problem=)

Thanks for your solution btw, BUT the image and the paragraph has to stay in their separate parents, So I can’t inline them I guess?

4

I believe I solved all your other centering questions that I contributed in. You haven’t yet replied to the last answer I gave in one of your other threads.:slight_smile:

Thanks for your solution btw, BUT the image and the paragraph has to stay in their separate parents, So I can’t inline them I guess?

No difference. Just apply the styles to the parent of those two elements instead.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body, html, p {
	padding: 0;
	margin: 0;
}
.parent {
	width: 100%;
	background: #eee;
	overflow: hidden;
}
.child {
	width: 49%;
	vertical-align:middle;
	display:inline-block;
 *display:inline;/* ie7 hack for inline-block remove if not supported*/
 *zoom:1.0;/* ie7 hack for inline-block remove if not supported*/
}
.child img{width:100%;height:auto}
.parent p {margin:5px;}
</style>
</head>

<body>
<div class="parent"> 
	<div class="child"><img src="http://placehold.it/350x150"></div>
		<div class="child"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et odio est. Suspendisse pulvinar blandit urna, a adipiscing est porttitor nec. </p></div>
</div>
</body>
</html>

or with display:table-cell.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body, html, p {
	padding: 0;
	margin: 0;
}
.parent {
	width: 100%;
	background: #eee;
	overflow: hidden;
}
.child {
	width: 49%;
	vertical-align:middle;
	display:table-cell;
 *display:inline;/* ie7 hack for inline-block remove if not supported*/
 *zoom:1.0;/* ie7 hack for inline-block remove if not supported*/
}
.child img{width:100%;height:auto}
.parent p {margin:5px;}
</style>
</head>

<body>
<div class="parent"> 
	<div class="child"><img src="http://placehold.it/350x150"></div>
		<div class="child"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et odio est. Suspendisse pulvinar blandit urna, a adipiscing est porttitor nec. </p></div>
</div>
</body>
</html>

This is just basic css. No need for JS:)

5

Forgot to say thanks for the help, it worked=)