Vertical Align Center Image in Fixed Size Div

vertical align center image in fixed size div

You can replace the image by a background on the div like this :

<div style="background:url(myimage.jpg) no-repeat center center"></div>

Align and center images in a fixed div

You can just add text-align: center on fixed div.

div.fixed {  position: fixed;  bottom: 0;  right: 0;  width: 100%;  height: 9%;  background-color: pink;  text-align: center;}

<div class="fixed">  <img src="images/icons/icon.png">  <img src="images/icons/icon.png">  <img src="images/icons/icon.png">  <img src="images/icons/icon.png">  <img src="images/icons/icon.png"></div>

vertical align center image in fixed size div

You can replace the image by a background on the div like this :

<div style="background:url(myimage.jpg) no-repeat center center"></div>

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>

Centering an image vertically in a div with a dynamic height

You can give the parents divs relative positioning and the images absolute positioning:

img {    width:25px;    position:absolute;    margin:auto;    top:0;    bottom:0;}.container-fluid > div {    text-align:center;    height: calc(100vh/5);    position:relative;}.container-fluid > div:nth-child(odd) {    background:yellow;}

<div class="container-fluid">    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div></div>

How to vertically center an image within a fixed div

You can just replace display: inline-block in #logocontainer to be display: flex

#container {    background-color: black;    z-index: 0;    position: fixed;    left: 0;    right: 0;    top: 0;    bottom: 0;    width: 100%;    height: 100%;}
#logocontainer {    position: fixed;    margin: 0 auto;    z-index: 1;    left: 0;    right: 0;    top: 0;    bottom: 0;    width: 50%;    height: 100%;    display: flex;    vertical-align: middle;    align-items: center;    justify-content: center;    text-align: center;}
#logocontainer a{   width: 100%;   height: 50%;   overflow: hidden;}
#logocontainer img {    width: 100%;    height: 100%;}

<div id="container"><div id="logocontainer">    <a href="/"> <img src="https://cdn.vox-cdn.com/thumbor/0n6dqQfk9MuOBSiM39Pog2Bw39Y=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/19341372/microsoftedgenewlogo.jpg" alt="Logo." /> </a></div>      </div>  

How to center image vertically in div

I use this css snippet:

.selector {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Applied to your sample: https://jsfiddle.net/nhdh8ycr/4/

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.

CSS: Vertically align div when no fixed size of the div is known

This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.

The solution is based on vertical-align: middle in conjunction with line-height: 0, which parent has a fixed line-height.

The HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="Sample Image" />
    </span>
</span>

And the CSS:

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.

The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="Sample Image" /></span>
</span>

Note that the span's are also required for IE7. In every other browser, the span's may be div's.

---

Related Topics