<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
The div expands to 100% as it should but the image does not center itself. Why?
views:
179answers:
5
+11
A:
Because your image is an inline-block element. You could change it to a block-level element like this:
<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />
and it will be centered.
Keltex
2010-06-10 14:19:07
Bingo..........
Christopher Altman
2010-06-10 14:22:24
I guess I never really considered something so blocky as an image to be inline by default but now that you mention it, it does kind of make sense.
Joe Philllips
2010-06-10 14:27:23
It’s technically `inline-block` by default, which is slightly different to `inline`.
Paul D. Waite
2010-06-10 14:47:48
@Paul - You're correct on that. I modified my answer.
Keltex
2010-06-10 17:18:11
+3
A:
Add style="text-align:center;"
try below code
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="text-align:center;vertical-align:middle;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
Pranay Rana
2010-06-10 14:19:31
I don't think your answer is incorrect but yours is lacking any explanation of the display type.
Joe Philllips
2010-06-10 14:34:10
+3
A:
You need to render it as block level;
img {
display: block;
width: auto;
margin: auto;
}
TheDeadMedic
2010-06-10 14:20:16
Vertical alignment is not as straight forward as you might have hoped. It's all down to the CSS spec - check out this beautifully concise article on the matter - http://phrogz.net/css/vertical-align/index.html
TheDeadMedic
2010-06-10 14:33:26
A:
<div style="text-align:center;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
Salil
2010-06-10 14:20:31
A:
open div then put style="width:100% ; margin:0px auto;"
image tag (or) content
close div
Hamd Islam
2010-06-10 14:43:43