I'm desperately trying to format two images side by side using CSS.
I want the first one to be fixed-size and the second one to take up the remaining width (but it should stop growing when it has the same height as the first one). This is my code:
<span style="height:80px; width:100%">
<img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>
<img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" />
</span>
But instead of the second image shrinking (maintaining aspect-ratio) when there is not enough space, the line breaks.
Thanks for any help!
This possible solution requires CSS calc(), see the demo follows.
div {
height: 100px;
overflow: hidden;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
}
span:nth-child(2) {
width: calc(100% - 100px);
}
span:nth-child(2) img {
width: 100%;
height: auto;
}
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/100/100" /></span>
</div>
JSFiddle: http://jsfiddle.net/Low7k16d/
HTML:
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div>
</div>
CSS:
.image-container {
width: 100%;
display: flex;
align-items: flex-start;
}
.image {
margin: 10px;
padding: 0;
flex-shrink: 0;
}
.image img {
width: 100%;
margin: 0;
padding: 0;
max-height: 80px; /*Line added to limit height*/
}
.image-auto {
flex-shrink: 1;
height: auto;
}
And I updated the Pen: http://codepen.io/czoka/pen/XbJXVO
I don't completely understand your question but this is what I thought you mean.
NOTE: this is my updated version of sdcr's answer.
CSS:
div {
height: 80px;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
padding:10px;
}
span:nth-child(1) img {
max-height: 60px;
}
span:nth-child(2) img {
width: 100%;
HTML
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/output/people-q-c-924-67-9.jpg" /></span>
</div>
See jsfiddle:
http://jsfiddle.net/Low7k16d/4/
I am trying to align three images in a header div. I need one image on the left - once centered - and an image on the right. I have the image on the left and the centered image in place. However, I cannot get the image I need on the right to display on the right of the centered image. If I float:left the centered image it messes up my centered image in various browsers. The image I want on the right displays on the left of the centered image. How do I get it on the right side of the centered image? Thank you very much.
Here is my code:
HTML:
<div class="header">
<div class="headerLeft">
<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerLeft-->
<div class="headerCenter">
<img src="logo85.jpg"
width="485"
height="93"
alt="Salvation Army" />
</div> <!-- closing tag of headerCenter -->
<div class="headerRight">
<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerRight -->
</div> <!-- closing tag of header -->
CSS:
.header{
width: 100%;
height: 115px;
background-color: #0B0B3B;
margin-bottom: -15px;
}
.headerLeft{
float: left;
width: 105px;
height: 115px;
}
.headerCenter{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 485px;
height: 93px;
}
.headerRight{
float: left;
text-align: right;
margin-left: 15px;
width: 105px;
height: 115px;
}
Quick answer :
*
{
box-sizing: border-box;
}
header
{
background: grey;
color: white;
padding: 1em;
position: relative;
height: 5em;
width: 100;
}
img
{
display: block;
height: 3em;
margin: auto;
}
img.right
{
position: absolute;
right: 1em;
top: 1em;
}
img.left
{
left: 1em;
position: absolute;
top: 1em;
}
<header>
<img src="http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif" alt="" class="left" />
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRBzTbPH8FRYR0HRqTmXnwSO4GgLbFO6rpALpwynKRr4SM_nTCywQQO6qvDcg" alt="" class="center" />
<img src="https://c2.staticflickr.com/4/3016/3071708735_ddaf5d361b.jpg" alt="" class="right" />
</header>
To avoid using position: absolute;, I'd recommend using calc to help out, and wrapping the .headerCenter in .headerCenterWrapper as I have below.
CSS:
.headerLeft {
width: 105px;
height: 115px;
display: inline-block;
}
.headerCenterWrapper {
width: calc(100% - 220px); /* Using a number slightly more than the sum of the side images' widths (210 px) to be safe */
height: 115px;
display: inline-block;
text-align: center;
}
.headerCenter {
width: 50px;
height: 115px;
display: inline-block;
}
.headerRight {
width: 105px;
height: 115px;
display: inline-block;
}
And the HTML:
<header class="header">
<img src="" alt="" class="headerLeft"/>
<div class="headerCenterWrapper">
<img src="" alt="" class="headerCenter" />
</div>
<img src="" alt="" class="headerRight" />
</header>
css
.headerLeft{
float: left;
width: 33.33%;
height: 115px;
}
.headerCenter{
margin-left: auto;
margin-right: auto;
width: 33.33%;
height: 115px;
float:left;
text-align:center;
}
.headerRight{
float: right;
width: 33.33%;
height: 115px;
text-align:right;
}
html
<div class="header">
<div class="headerLeft">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerLeft-->
<div class="headerCenter">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army" />
</div> <!-- closing tag of headerCenter -->
<div class="headerRight">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerRight -->
</div>
How can you align an image inside of a containing div?
Example
In my example, I need to vertically center the <img> in the <div> with class ="frame":
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame's height is fixed and the image's height is unknown. I can add new elements in .frame if that's the only solution. I'm trying to do this on Internet Explorer 7 and later, WebKit, Gecko.
See the jsfiddle here.
.frame {
height: 25px; /* Equals maximum image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</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>
Or, if you don't want to have an extra element in modern browsers and don't mind using Internet Explorer expressions, you can use a pseudo-element and add it to Internet Explorer using a convenient Expression, that runs only once per element, so there won't be any performance issues:
The solution with :before and expression() for Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/
.frame {
height: 25px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center;
margin: 1em 0;
}
.frame:before,
.frame_before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
/* Move this to conditional comments */
.frame {
list-style:none;
behavior: expression(
function(t){
t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
t.runtimeStyle.behavior = 'none';
}(this)
);
}
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
How it works:
When you have two inline-block elements near each other, you can align each to other's side, so with vertical-align: middle you'll get something like this:
When you have a block with fixed height (in px, em or another absolute unit), you can set the height of inner blocks in %.
So, adding one inline-block with height: 100% in a block with fixed height would align another inline-block element in it (<img/> in your case) vertically near it.
This might be useful:
div {
position: relative;
width: 200px;
height: 200px;
}
img {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.image {
min-height: 50px
}
matejkramny's solution is a good start, but oversized images have a wrong ratio.
Here's my fork:
Demo: https://jsbin.com/lidebapomi/edit?html,css,output
HTML:
<div class="frame">
<img src="foo"/>
</div>
CSS:
.frame {
height: 160px; /* Can be anything */
width: 160px; /* Can be anything */
position: relative;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
A three-line solution:
position: relative;
top: 50%;
transform: translateY(-50%);
This applies to anything.
From here.
A pure CSS solution:
.frame {
margin: 1em 0;
height: 35px;
width: 160px;
border: 1px solid red;
position: relative;
}
img {
max-height: 25px;
max-width: 160px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #3A6F9A;
}
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>
Key stuff
// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically
For a more modern solution, and if there is no need to support legacy browsers, you can do this:
.frame {
display: flex;
/**
Uncomment 'justify-content' below to center horizontally.
✪ Read below for a better way to center vertically and horizontally.
**/
/* justify-content: center; */
align-items: center;
}
img {
height: auto;
/**
✪ To center this image both vertically and horizontally,
in the .frame rule above comment the 'justify-content'
and 'align-items' declarations,
then uncomment 'margin: auto;' below.
**/
/* margin: auto; */
}
/* Styling stuff not needed for demo */
.frame {
max-width: 900px;
height: 200px;
margin: auto;
background: #222;
}
p {
max-width: 900px;
margin: 20px auto 0;
}
img {
width: 150px;
}
<div class="frame">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>
Here's a Pen using Flexbox: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
EDIT 1/13/22
There's a better way to do this using CSS Grid and the place-content shorthand:
.frame-text-grid {
display: grid;
place-content: center;
/**
✪ "place-content" is the shorthand for "align-content" and "justify-content".
✪ The "place-content" shorthand requires two values, the first one is for "align-content" and the second one for "justify-content". If only one value is present (like in this demo), then that single value is applied to both directions.
✪ Comment the "place-content: center;" declaration above to see how the elements are spread along the height of the container.
**/
}
<div class="ctnr frame-text-grid">
<h2>Using Grid and <code>place-content</code></h2>
<p>Only two lines are needed to center vertically and horizontally.</p>
</div>
Here's a Pen using CSS Grid: https://codepen.io/ricardozea/pen/c4e27f1e74542618d73e21f7c2276272?editors=0100
This way you can center an image vertically (demo):
div{
height: 150px; // Internet Explorer 7 fix
line-height: 150px;
}
img{
vertical-align: middle;
margin-bottom: 0.25em;
}
Also, you can use Flexbox to achieve the correct result:
.parent {
align-items: center; /* For vertical align */
background: red;
display: flex;
height: 250px;
/* justify-content: center; <- for horizontal align */
width: 250px;
}
<div class="parent">
<img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>
There is a super easy solution with flexbox!
.frame {
display: flex;
align-items: center;
}
Imagine you have
<div class="wrap">
<img src="#">
</div>
And css:
.wrap {
display: flex;
}
.wrap img {
object-fit: contain;
}
CSS Grid
If you want to align a single image vertically inside an image container you can use this:
.img-container {
display: grid;
}
img {
align-self: center;
}
.img-container {
display: grid;
grid-auto-flow: column;
background: #BADA55;
width: 1200px;
height: 500px;
}
img.vertical-align {
align-self: center;
}
<div class="img-container">
<img src="https://picsum.photos/300/300" />
<img class="vertical-align" src="https://picsum.photos/300/300" />
<img src="https://picsum.photos/300/300" />
</div>
If you want to align multiple images inside an image container you can use this:
.img-container {
display: grid;
align-items: center;
}
.img-container {
display: grid;
grid-auto-flow: column;
align-items: center;
background: #BADA55;
width: 1200px;
height: 500px;
}
<div class="img-container">
<img src="https://picsum.photos/300/300" />
<img src="https://picsum.photos/300/300" />
<img src="https://picsum.photos/300/300" />
</div>
Please note that I have used grid-auto-flow: column in both the cases because otherwise the elements wrap to a row with specifying explicit grid items. In the question code, I see the item centered horizontally too. In that case, just make use of the place-items: center instead of align-items: center.
You could try setting the CSS of PI to display: table-cell; vertical-align: middle;
You can try the below code:
.frame{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
Background image solution
I removed the image element altogether and set it as background of the div with a class of .frame
http://jsfiddle.net/URVKa/2/
This at least works fine on Internet Explorer 8, Firefox 6 and Chrome 13.
I checked, and this solution will not work to shrink images larger than 25 pixels height. There is a property called background-size which does set the size of the element, but it is CSS 3 which would conflict with Internet Explorer 7 requirements.
I would advice you to either redo your browser priorities and design for the best available browsers, or get some server-side code to resize the images if you'd want to use this solution.
http://jsfiddle.net/MBs64/
.frame {
height: 35px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
display: table-cell;
vertical-align: middle;
}
img {
background: #3A6F9A;
display: block;
max-height: 35px;
max-width: 160px;
}
The key property is display: table-cell; for .frame. Div.frame is displayed as inline with this, so you need to wrap it in a block element.
This works in Firefox, Opera, Chrome, Safari and Internet Explorer 8 (and later).
UPDATE
For Internet Explorer 7 we need to add a CSS expression:
*:first-child+html img {
position: relative;
top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
You could do this:
Demo
http://jsfiddle.net/DZ8vW/1
CSS
.frame {
height: 25px; /* Equals maximum image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
position: relative; /* Changes here... */
}
img {
background: #3A6F9A;
max-height: 25px;
max-width: 160px;
top: 50%; /* Here.. */
left: 50%; /* Here... */
position: absolute; /* And here */
}
JavaScript
$("img").each(function(){
this.style.marginTop = $(this).height() / -2 + "px";
})
This works for modern browsers (2016 at time of edit) as shown in this demo on codepen
.frame {
height: 25px;
line-height: 25px;
width: 160px;
border: 1px solid #83A7D3;
}
.frame img {
background: #3A6F9A;
display:inline-block;
vertical-align: middle;
}
It is very important that you either give the images a class or use inheritance to target the images that you need centered. In this example we used .frame img {} so that only images wrapped by a div with a class of .frame would be targeted.
Solution using a table and table cells
Sometimes it should be solved by displaying as table/table-cell. For example, a fast title screen. It is a recommended way by W3 also. I recommend you check this link called Centering a block or image from W3C.org.
The tips used here are:
Absolute positioning container displayed as table
Vertical aligned to center content displayed as table-cell
.container {
position: absolute;
display: table;
width: 100%;
height: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
}
<div class="container">
<div class="content">
<h1 style="text-align:center">Peace in the world</h1>
</div>
</div>
Personally I actually disagree about use helpers for this purpose.
My solution: http://jsfiddle.net/XNAj6/2/
<div class="container">
<div class="frame">
<img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
</div>
</div>
.container {
display: table;
float: left;
border: solid black 1px;
margin: 2px;
padding: 0;
background-color: black;
width: 150px;
height: 150px;
}
.frame {
display: table-cell;
text-align: center;
vertical-align: middle;
border-width: 0;
}
.img {
max-width: 150px;
max-height: 150px;
vertical-align: middle;
}
Try this solution with pure CSS http://jsfiddle.net/sandeep/4RPFa/72/
Maybe it is the main problem with your HTML. You're not using quotes when you define class & image height in your HTML.
CSS:
.frame {
height: 25px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
position: relative;
margin: 1em 0;
top: 50%;
text-align: center;
line-height: 24px;
margin-bottom: 20px;
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height: 0;
margin: 0 auto;
max-height: 25px;
}
When I work around with the img tag it's leaving 3 pixels to 2 pixels space from top. Now I decrease line-height, and it's working.
CSS:
.frame {
height: 25px; /* Equals maximum image height */
width: 160px;
border: 1px solid red;
margin: 1em 0;
text-align: center;
line-height: 22px;
*:first-child+html line-height:24px; /* For Internet Explorer 7 */
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height: 0;
max-height: 25px;
max-width: 160px;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
.frame {
line-height:20px; /* WebKit browsers */
}
The line-height property is rendered differently in different browsers. So, we have to define different line-height property browsers.
Check this example: http://jsfiddle.net/sandeep/4be8t/11/
Check this example about line-height different in different browsers: input height differences in Firefox and Chrome
I am not sure about Internet Explorer, but under Firefox and Chrome, if you have an img in a div container, the following CSS content should work. At least for me it works well:
div.img-container {
display: table-cell;
vertical-align: middle;
height: 450px;
width: 490px;
}
div.img-container img {
max-height: 450px;
max-width: 490px;
}
An easy way which work for me:
img {
vertical-align: middle;
display: inline-block;
position: relative;
}
It works for Google Chrome very well. Try this one out in a different browser.
For centering an image inside a container (it could be a logo) besides some text like this:
Basically you wrap the image
.outer-frame {
border: 1px solid red;
min-height: 200px;
text-align: center; /* Only to align horizontally */
}
.wrapper{
line-height: 200px;
border: 2px dashed blue;
border-radius: 20px;
margin: 50px
}
img {
/* height: auto; */
vertical-align: middle; /* Only to align vertically */
}
<div class="outer-frame">
<div class="wrapper">
some text
<img src="http://via.placeholder.com/150x150">
</div>
</div>
If you can live with pixel-sized margins, just add font-size: 1px; to the .frame. But remember, that now on the .frame 1em = 1px, which means, you need to set the margin in pixels too.
http://jsfiddle.net/feeela/4RPFa/96/
Now it's not centered any more in Opera…
I had the same problem. This works for me:
<style type="text/css">
div.parent {
position: relative;
}
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
I add a new solution to this old question because I see that my preferred method is not included in the answers.
In every project, at the very beginning, I create 2 CSS classes
.flex-centered {
display: flex;
flex-direction-column;
justify-content:center
}
.abs-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
You can center elements with both, depending on the situation.
flex-centered is more versatile for images and content on the page,
abs-centered need a relative parent is good for centered div, like popups.
So you just call
<div class='flex-centered'>
<img>
</div>
and the image is vertically centered.
.flex-centered {
display: flex;
flex-direction: column;
justify-content: center;
}
/* this to center horizontally, too */
.m0a {
margin: 0 auto
}
/* Make a big parent grey */
.big-div {
height:200px;
width: 200px;
background:#ccc;
border-radius: 4px;
}
/* Make a small div to be centered */
.small-div {
height:20px;
width:20px;
background:red;
}
<div class="flex-centered big-div" >
<div class="small-div m0a"></div>
</div>
You can use this:
.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px; /* 50% of the height */
margin-left: -30px;
}
Using table and table-cell method do the job, specially because you targeting some old browsers as well, I create a snippet for you which you can run it and check the result:
.wrapper {
position: relative;
display: table;
width: 300px;
height: 200px;
}
.inside {
vertical-align: middle;
display: table-cell;
}
<div class="wrapper">
<div class="inside">
<p>Centre me please!!!</p>
</div>
<div class="inside">
<img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>
</div>
Want to align an image which have after a text / title and both are inside a div?
See on JSfiddle or Run Code Snippet.
Just be sure to have an ID or a class at all your elements (div, img, title, etc.).
For me works this solution on all browsers (for mobile devices you must to adapt your code with: #media).
h2.h2red {
color: red;
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;
display: block;
float: left; /* If you want to allign the text with an image on the same row */
width: 100px;
heght: 100px;
margin-top: -40px /* Change this value to adapt to your page */;
}
<div class="mydivclass">
<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>
I have been playing around with using padding for center alignment. You will need to define the top level outer-container size, but the inner container should resize, and you can set the padding at different percentage values.
jsfiddle
<div class='container'>
<img src='image.jpg' />
</div>
.container {
padding: 20%;
background-color: blue;
}
img {
width: 100%;
}