Align an Image Centrally within a Div

Question

I would like to place an image centrally within a div (fiddle). Because I want that div to inherit that div's height from another one that is floating next to it, I had to use this trick.

For that reason, the solutions described here don't seem to be working.

The requirement is that no other behavior is modified, but the code can be as long as the effect achieved is the same. I am also willing to accept solutions involving javascript, if necessary.

<div class="container"> 
<div class="logo-div">
    <img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
<div class="text-div">
    <h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
    What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>

.container {
    background: green;
    overflow: hidden;
}

.logo-div {
    background: yellow;
    width: 150px;
    float: left;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

.text-div {
    background: blue;
    float: left;
    max-width: 350px;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

.logo {
    width: 100px;
}

score 2 · Answer 1 · answered Jul 15 '14 at 12:24

I have modified the code so that the logo image can be center aligned horizontally as well as vertically.

JSFiddle

HTML code:

<div class="container"> 
    <div class="image-div">
        <div class="logo-div">
            <img class="logo" src="http://bit.ly/1qCKrtJ" />
        </div>
    </div>
    <div class="text-div">
        <h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
        What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
    </div>
</div>

Css code:

.container {
    background: green;
    overflow: hidden;
}

.logo-div {
    background: #FFFF00;
    display: table-cell;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    width: 150px;
}

.text-div {
    background: blue;
    float: left;
    max-width: 350px;
}
.image-div {
    float: left;
}
.logo {
    width: 100px;
}

If you have further issue, please comment on the code, and modify the jsfiddle.

Regards D.

Yes, you are right, but for the same issue, i have added a new jquery, [New JS Edited](http://jsfiddle.net/devangkantharia/2gTh3/2/) I hope this solves the problem. But if there is some dynamic text that is added, then this jquery code is to be defined in function, which is called on layout change... Regards D. — DevangKantharia, Jul 15 '14 at 12:35

Karmalakas · Answer 2 · 2014-07-15T12:36:22.073

0

If you need just horizontal center, try:

.logo-div {text-align: center;}
img {margin: 0 auto;}

http://jsfiddle.net/yXNnd/18/

JS version

Using jQuery (I'm too lazy :))
http://jsfiddle.net/yXNnd/25/

Add this js

$(document).ready(function(){
    var img = $('.logo-div img');
    var top = ($('.container').height() / 2) - (img.height() / 2);
    img.css('margin-top', top + 'px');
});

edited Jul 15 '14 at 12:36

answered Jul 15 '14 at 12:07

Karmalakas

1,143
2
19
39

I would like both horizontal and vertical if possible. An alternative solution is to make the divs behave like table cells, but then I lose the nice aspect of the right div dropping below. But in the worst case scenario, I would rather have that than no vertical centering. – MGA Jul 15 '14 at 12:15
Added JS version using jQuery. All it does - count heights of container and image and add top margin to allignt vertically to middle of contents. Also You can use Devang's edited answer with one more div and `display: table-cell;` – Karmalakas Jul 15 '14 at 12:37
@Devang Thanks guys. A bit of a meta-question: I'm not a professional web developer, I'm only building my homepage so I'm learning as I go along. Are there any serious reasons to avoid JavaScript/jQuery? (e.g. CRONUS said "I'm too lazy" to justify using jQuery, what is the problem with that exactly?) – MGA Jul 15 '14 at 13:20
Maybe plain JS is a better choice in this situation, but as I'm using jQuery in all of the project's I'm working with, I can't even remember exactly how to get element's heights :D That's why I'm too lazy to search how to achieve what You need using plain JS ;) – Karmalakas Jul 15 '14 at 13:29

score 0 · Answer 3 · answered Jul 15 '14 at 12:18

There are two ways for this. One you can set Margin property of any component to 'auto' if you want it to align at the middle. Of course you can set this property in CSS instead of using style tag.

<img src="http://bit.ly/1qCKrtJ" style="margin:auto;"/>

Another is using center tag (As 'margin:auto' may not work for images for some browsers however it works for div tag.)

<center>
    <img src="http://bit.ly/1qCKrtJ" alt="Logo">
</center>

Align an Image Centrally within a Div

3 Answers3