CSS - Vertically Center an Image Within a Floated Div

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!

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>

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 vertical center floated div with anchor and image

you may use vertical-align on img and line-height, example:

.top {  height: 150px;  background-color: blue;}
.container {  float: right;  line-height: 150px;}
img {  vertical-align: middle;}

<div class="top">  <div class="container">    <a href="#">      <img src="http://lorempixel.com/400/200/" alt="Smiley face" height="50" width="140">    </a>  </div></div>

Vertically center text and image inside floating div

You can achieve a totally centered element using calc and view-units:

#example {    width: 100px;    height: 100px;    border: 1px solid green;    border-radius: 50px;    position: fixed;    top: calc(50vh - 50px);    left: calc(50vw - 50px);}

<div id="example"></div>

how to vertically align a floated image

You can try moving the logo into the navbar div like this:

'<div class="container">
    <div id="navbar">
       <a href="#"><img id="logo" src="http://brandmark.io/logo-rank/random/apple.png" alt="Sample Image"/></a>
        <a href="#">Home</a>
        <a href="#">About U</a>
        <a href="#">Our Service</a>
        <a href="#">Our Products</a>
        <a href="#">Contac</a>
    </div>
</div>'

And change the CSS like this:

#navbar {
    display: flex;
    justify-content: center;
    align-items: center;
}

How to vertically middle-align floating elements of unknown heights?

You can't do this directly, because floats are aligned to the top:

If there is a line box, the outer top of the floated box is aligned
with the top of the current line box.

The exact rules say (emphasis mine):

4. A floating box's outer top may not be higher than the top of its containing block.
5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an
   element earlier in the source document.
6. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an
   element earlier in the source document.

8. A floating box must be placed as high as possible.

That said, you can take advantage of rule #4:

• Place each float inside inline-level elements that establish a new block formatting context /BFC), e.g. display: inline-block.
• These wrappers will contain the floats because they establish a BFC, and will be one next to the other because they are inline-level.
• Use vertical-align to align these wrapper vertically.

Be aware that some space might appear between the inline-block wrappers. See How to remove the space between inline-block elements? to fix it.

.float-left {  float: left;}
.float-right {  float: right;}
#main {  border: 1px solid blue;  margin: 0 auto;  width: 500px;}
/* Float wrappers */#main > div {  display: inline-block;  vertical-align: middle;  width: 50%;}

<div id="main">  <div>    <div class="float-left">      <p>AAA</p>    </div>  </div>  <div>    <div class="float-right">      <p>BBB</p>      <p>BBB</p>    </div>  </div></div>

---

Related Topics