CODEWITHSUNDEEP
css
Vinoth Kumar
Vinoth Kumar

Reputation: 93

how to align an image to the center of the div?

I am trying to align an image in a div to center. I have tried the following but its not working. Please tell me how to fix this . thanks in advance.

<div class="erabox"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div>

Upvotes: 4

Views: 1591

Answers (6)

Babur Ussenakunov
Babur Ussenakunov

Reputation: 1995

If .erabox div's width and height are fixed or at least it's height and width are always surely greater than image's you can use image as a background

HTML

<div class="erabox"></div>

CSS

.erabox{
    background:url("indicator2.gif") no-repeat;
    background-position:50% 50%;
}

Upvotes: 0

Burntime
Burntime

Reputation: 2344

Just use margin auto:

  .erabox img {
    display: block;
    margin: auto;
  }

DEMO: http://jsbin.com/apiwox/edit#html,live

Upvotes: 1

Babur Ussenakunov
Babur Ussenakunov

Reputation: 1995

CSS

.erabox{
    position:relative;
}

.erabox img{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-19px; /* Half of images height */
    margin-left:-115px; /* Half of images width */
}

Upvotes: 0

Ariful Islam
Ariful Islam

Reputation: 7675

Try with the following CSS code. It makes your <img> aligned center horizontally and aligned middle vertically. 

.erabox{
    width:200px;
    height:200px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

Upvotes: 1

Mohammad Saberi
Mohammad Saberi

Reputation: 13166

<div class="erabox" style="text-align:center"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div>

just you need style="text-align:center" in your div tag.

Upvotes: 2

Pradip R.
Pradip R.

Reputation: 450

Try below code in CSS. it will work for sure align="absmiddle"

Upvotes: 0

Related Questions