CODEWITHSUNDEEP
csshtmlweb-standards
GC_
GC_

Reputation: 1673

How can I horizontally and vertically center an <img> in a <div>?

I don't want to center a div, I want the contents of a div to be centered. I would like horizontal and vertical alignment.

Sorry, if this is too easy or whatever, but this is kind of a hassle to get it right.

Grae

I am using IE7

Upvotes: 3

Views: 335

Answers (5)

Lorenzo
Lorenzo

Reputation: 29427

I know you've said that dont want to center a div but to achieve your requirement in a cross browser way would be easier using a jquery plugin and a fake div that contains your element to be centered.

I have successfully centered almost anything using this very small plugin that can center any block element.

The only other way I know are the answer that you already received from @simshaun & @Prhogz

EDIT: As per comment request

Include the script in your head tag

<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery.center.min.js" )%>"></script>

Now if you have a DIV that you want to center inside your markup simply use it as 

$(document).ready(function() {
    $("#myDIV").center({ vertical: false });
});

Upvotes: 2

Mohamed Kamal
Mohamed Kamal

Reputation: 2352

although the following is obsolete, it still works for almost all browsers

<center>
<div>
your html
</div>
</center>

however, visit this link

http://www.110mb.com/forum/vertical-horizontal-alignment-of-image-within-div-t31709.0.html

Upvotes: 1

Phrogz
Phrogz

Reputation: 303224

If you know the height and width of your image, position it absolutely, set top/left to 50% and margin-top/left to negative half the height/width of your image.

#foo {
    position:relative; /* Ensure that this is a positioned parent */
}
#foo img {
    width:240px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-120px;
    margin-top:-100px;
}

Live example: http://jsfiddle.net/Zd2pz/

Upvotes: 2

simshaun
simshaun

Reputation: 21466

If you know the inner element's height beforehand,

CSS:

.container {
    text-align: center; /* Center horizontally. */

    /* For demo only */
    border: 1px solid #000;
    height: 500px;
    margin: 20px;
    width: 700px;
}

.container img {
    margin-top: -167px;
    position: relative;
    top: 50%;
}

HTML:

<div class="container">
    <img src="http://farm6.static.flickr.com/5004/5270561847_7223069d5e.jpg" width="500" height="334" alt="">
</div>

Example

Upvotes: 0

Mitro
Mitro

Reputation: 1616

For horizontal alignment, use text-align:center;

For vertical alignment, see for example the W3 style guide

Upvotes: 0

Related Questions