Centering two divs containing img and h2? - html

Question

I am trying to align a small image (logo) next to a heading on my page, and I want these two items to be centered (ideally, the heading would be centered, and the image would be to next to the heading). However, no matter what I try, I can't seem to make it work. Here's a sample:
<h2>Headline</h2>
<img src="logo.jpg">
Now, I have tried a couple of things here. I have tried giving the h2 a div with an id, and the image a div with another id - then giving them set widths and floating them. This at least puts them on the same line, but not in a way I want to.
I also tried to wrap those divs inside another div, like so:
#container {
width: 800px;
margin: 0 auto;
}
#h2div {
width: 40%;
float: left;
}
#imgdiv {
width: 10%;
float: left;
}
That only seems to divide the page so that the header gets 40% starting from the left, and the image gets 10% after that. I tried experimenting with z-index: -1 on the image, and if I then use text-align: center, I can center the headling. But then I have to give the picture a position:absolute or relative, which doesn't work well if the user zooms in or out..
How do I solve this? How do I get either the headline centered, and the image to display right next to it (sort of anchored to the "end" of the headline), or have the two share the center?

Answer 1

how about something like this:
<div id="container">
<h2>Headline</h2>
<img src="logo.jpg">
</div>
#container {
width: 800px;
margin: 0 auto;
text-align: center;
}
#container h2, #container img {
display: inline;
}
and jsfiddle - http://jsfiddle.net/Ygz4t/

Answer 2

img is inline element, so you should assign text-align:center; to the parent block element. Assuming you have such markup:
<div id="imgdiv">
<img src="logo.jpg">
</div>
your CSS could be like following:
#imgdiv {
text-align: center;
}

Answer 3

1) Wrap the h2 and img within a div (lets call it as container) and make display: inline-block to show h2 and img in same line
2) Then using text-align: center
HTML:
<div id="container">
<h2 style="display: inline-block">Headline</h2>
<img src="logo.jpg" />
</div>
CSS:
body {
width:1000px;
height: 2000px;
background: #ccc;
}
#container {
text-align: center;
width: inherit;
}
h2, img {
display: inline-block;
}
JSFiddle

Answer 4

HTML:
<div>
<h2>Headline</h2>
<img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_s.jpg" />
</div>
CSS:
h2, img {
display:inline;
}
h2 {
margin: 0;
line-height: 100%;
}
img {
vertical-align: middle;
}
DEMO

Answer 5

I think you are trying this,
HTML
<div class="out">
<div class="inline">
<h2>TEST</h2>
</div>
<div class="inline">
<img src='http://s15.postimg.org/p4qxel6hz/agent_Photo.jpg' alt="testImage"/>
</div>
</div>
CSS
.out {
width: 800px;
margin: 0 auto;
}
.inline {
display:inline-block;
}
Updated JSFIDDLE

Answer 6

try this
<div id="center">
<h2>Headline</h2>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR613FD45Dsf0nk_cJwlvpAUKsBM6JeOmNjAatjKKBHz_GFXt7rrvslw" alt="not found" />
</div>
Demo Fidle