Center Image Vertically and Horizontally Inside of Div with Float:Left

Center image vertically and horizontally inside of DIV with float:left?

Remove float:left; from your .outer-element as it conflicts with how the table-cell displays content. If you need to float the container left, place the .outer-element within another container that floats left.

HTML

<div class="fl">
    <div class="outer-element">
        <div class="inner-element">
            <img src="http://thecybershadow.net/misc/stackoverflow.png" />
        </div>
    </div>
</div>

CSS

.fl {float:left;}
.outer-element{
    display:table-cell;
    width:300px;
    height:300px;
    vertical-align:middle;
    background:#666;
    text-align:center;
    margin-bottom:15px;
}
.inner-element{
    display:inline-block;
}

Exmaple:
http://jsfiddle.net/xQEBH/17/

Hope this helps!

Why cant center an image inside a 'div' with 'float' right or left?

You can use display: flex for this.

Change your display: table-cell to display: flex.

Then change text-align:center; and vertical-align:middle; to align-items: center; and justify-content: center; to center it vertically and horizontally.

Edit: Then I have also added a max-width of 150px to the image, to stop it expanding out of the container when the image is bigger than it. Props to @Hkidd for pointing out that this happens.

.con {  width: 300px;  height: 200px;  background: #996600;}.box {  position: relative;  width: 150px;  height: 150px;  background-color: #333333;  display: flex;  align-items: center;  justify-content: center;  float: right;}img {  max-width: 150px;}

<div class="con">  <div class="box">    <img src="http://placehold.it/200x100">  </div></div>

How to make an image center (vertically & horizontally) inside a bigger div

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

Let the browser take the strain.

How to vertically align an image inside a div

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {    height: 25px;      /* Equals maximum image height */    width: 160px;    border: 1px solid red;    white-space: nowrap; /* This is required unless you put the helper span closely near the img */
    text-align: center;    margin: 1em 0;}
.helper {    display: inline-block;    height: 100%;    vertical-align: middle;}
img {    background: #3A6F9A;    vertical-align: middle;    max-height: 25px;    max-width: 160px;}

<div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

Vertically center two floating images

Solved by CSS Flexbox:

The best move is to just nest a flexbox inside of a flexbox. All you have to do is give the child align-items: center. This will vertically align the text inside of its parent. Using display: flex you can control the vertical alignment of HTML elements.

Option 1 snippet:

#logo-block {
    display: flex;
    align-content: center;
    align-items: center; border:2px solid red; max-width:500px; justify-content:space-between;
}
#logo-block img { 
    max-width: 100px; 
}

 <div id="logo-block">
  <p>
    <img id="logo1" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/McDonald%27s_logo.svg" />
  </p>
  <p>
    <img id="logo2" src="https://www.festisite.nl/static/partylogo/img/logos/burger-king.png" />
  </p>
</div>

How to center image horizontally within a div element?

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/

Is there a more efficient way to center an image inside a floated div

To center both horizontally and vertically try adding this to the image.

img {
  display: block;
  position: absolute;
  margin: auto;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
}

The element around the image needs to be positioned relatively i.e.

position: relative

Here's an example with an image inside a floated element

http://jsfiddle.net/xYEuS/

Center Image Vertically and Horizontally Inside of Div with Float:Left