CODEWITHSUNDEEP
htmlcss
Шыназ Алиш
Шыназ Алиш

Reputation: 399

why my image not in center of div

Why my image not in the center(Horizontally, Vertically) of div.

<div>
   <img id = "loader-img" class="centered" alt src="al.gif">
</div>

and my css is:

.centered {
    display: block;
    margin-left: 150px;
    margin-right: 150px;
    margin-bottom: 100px;
    margin-top: 100px;
    height: 200px;
    width: 200px;
   }

Here is how my image looks like in div:

enter image description here

Upvotes: 0

Views: 141

Answers (4)

lharby
lharby

Reputation: 3265

As requested, this is my solution:

html

<div>
    <img src='http://placehold.it/100x50' />
</div>

css:

div {
    display: flex;
    background: pink;
    height: 200px;
}

img {
    margin:auto;
}

jsfiddle.net/lharby/48o5zd7g (thanks to Zakhar Day).

There are 3 answers in this thread that all work.

There could be something else in your css which is overriding the css rules you are trying to apply? I would strip out the .centered class properties and start with something really simple.

Upvotes: 0

rashadb
rashadb

Reputation: 2543

This works for me:

CSS:

#logo{
  max-width: 100%;
  height: auto;
  width: auto;

HTML:

<div>
   <img id="logo" src= {{image.get('logo').url()}}>
</div>

Upvotes: 0

Ganesh Salunkhe
Ganesh Salunkhe

Reputation: 598

Try This:

.frame {
    height: 125px;      
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class=frame>
    <span class="helper"></span>
    <img src="http://www.afew-store.com/js/vigoshop/ajaxcart/ajax-loader.gif" height=250 />
</div>

Demo Here

Update: As you say that above is the image which you are using then please note that given image itself is not good. As it has white background so its difficult to notice the difference.

I am drawing border around image and posting here again:

enter image description here

Upvotes: 1

Zakhar Day
Zakhar Day

Reputation: 421

Try this:

HTML

<div>
   <img src="al.gif">
</div>

CSS

div {
  display: -webkit-flex;
  display: flex;
}

img {
  margin: auto;
}

And also, your id attribute contains space symbols. You should remove them:

<img id="loader-img" class="centered" src="al.gif">

Upvotes: 0

Related Questions