Centering two divs containing img and h2?

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?

score 1 · Answer 1 · answered Oct 16 '13 at 09:31

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/

answered Oct 16 '13 at 09:31

Elen

2,345
3
24
47

This does center both items, but not on the same line. – user2885726 Oct 16 '13 at 12:16
@user2885726 i have checked in Chrome, IE and FF all display on the same line and centred? which browser and version you use? try adding `display:inline-block;` as well, example http://jsfiddle.net/Ygz4t/1/ – Elen Oct 16 '13 at 13:11
I will try adding it inside the h2. Thanks for the tip :) – user2885726 Oct 16 '13 at 13:58
Worked nicely with putting the image inside the h2. Thanks! Now for the real challenge: do you know of a way to anchor an image next to an already centered item? Let's say we halfway down the page have an image that is centered, is there a way to add an object in such a way that it lines up next to the centered item, without affecting the centered item? – user2885726 Oct 17 '13 at 16:41

score 0 · Answer 2 · answered Oct 16 '13 at 09:31

0

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;
}

answered Oct 16 '13 at 09:31

Azamat

435
5
13

score 0 · Answer 3 · answered Oct 16 '13 at 09:34

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

Ajith S · Answer 4 · 2013-10-16T09:48:05.123

0

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

edited Oct 16 '13 at 09:48

answered Oct 16 '13 at 09:35

Ajith S

2,907
1
18
30

Thanks! Allthough, this solution doesn't seem to center the headline and image on the page as a whole, i.e. it changes if the user zooms in or out, but they do not appear centered on the screen. It does however, line the elements up next to each other, which is one step further for me. – user2885726 Oct 16 '13 at 12:18

Vinay Pratap Singh Bhadauria · Answer 5 · 2013-10-16T09:48:11.690

0

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

edited Oct 16 '13 at 09:48

answered Oct 16 '13 at 09:39

Vinay Pratap Singh Bhadauria

9,829
3
28
49

``tag is deprecated : http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html – Aurélien Grimpard Oct 16 '13 at 09:44
@user2885726 now center is just an id so you can change it to any desired name – Vinay Pratap Singh Bhadauria Oct 16 '13 at 12:27
Thanks! This method helped me :) – user2885726 Oct 17 '13 at 16:35

Beniamin Szabo · Answer 6 · 2013-10-16T09:47:58.610

0

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

edited Oct 16 '13 at 09:47

answered Oct 16 '13 at 09:41

Beniamin Szabo

1,909
4
17
26

Centering two divs containing img and h2?

6 Answers6