CODEWITHSUNDEEP
htmlcss
user2885726
user2885726

Reputation: 11

Centering two divs containing img and h2?

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?

Upvotes: 1

Views: 613

Answers (6)

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

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

Upvotes: 0

Ajith S
Ajith S

Reputation: 2917

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

Upvotes: 0

Beniamin Szabo
Beniamin Szabo

Reputation: 1929

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

Upvotes: 0

Praveen
Praveen

Reputation: 56511

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

Upvotes: 0

Elen
Elen

Reputation: 2343

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/

Upvotes: 1

Azamat
Azamat

Reputation: 435

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

Upvotes: 0

Related Questions