overlay images over images in a footer with css - css

So i have a footer containing 8 images (4 buttons and 4 icons) the idea is to display each of the 4 icons over the respective button. If I use position:relative , they are just displayed one near the other, so 8 images separated, while it has to look like there are only 4 images.
This is what I want to get:
This is what I get instead:
My css:
.absolute {
position: absolute;
}
#footer {
position: fixed;
bottom: 0;
width: 90%;
height: 10%;
-webkit-transform: translate(-50%, -50%);
left: 50%;
display: flex;
justify-content: space-between;
}
#footer img {
height: 100%;
}
my html:
<div id="footer">
<img class="absolute" src="img/back.png" />
<img src="img/empty_circle_button.png" />
<img class="absolute" src="img/gems_btn.png" />
<img src="img/empty_circle_button.png" />
<img class="absolute" src="img/up.png" />
<img src="img/empty_circle_button.png" />
<img class="absolute" src="img/missions.png" />
<img src="img/empty_circle_button.png" />
</div>
I also need this to be valid in a webview. Any suggestion on what's wrong here?

Ok I found the solution by myself:
HTML:
<div id="footer">
<div><img src="img/back.png" /></div>
<div><img src="img/gems_btn.png" /></div>
<div><img src="img/up.png" /></div>
<div><img src="img/missions.png" /></div>
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
width: 90%;
height: 10%;
-webkit-transform: translate(-50%, -50%);
left: 50%;
display: flex;
justify-content: space-between;
}
#footer div {
background-image: url(../img/empty_circle_button.png);
background-size: contain;
height: 100%;
background-repeat: no-repeat;
}
#footer div img {
height: 100%;
}

Related

Can't display one slide at a time

I'm implementing a slider where I like to display one slide at a time.
I've tried it using flexbox for the display container but unfortunately can't make it. How can I display only one slide at a time?
<div class="viewport">
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<button class="prev-next-btn prev"></button>
<button class="prev-next-btn next"></button>
</div>
*** CSS ***
.viewport {
display: flex;
}
img {
max-width: 100%
}
.prev-next-btn {
position: absolute;
width: 35px;
height: 35px;
background: green;
top: 35%;
}
.prev-next-btn.next {
right: 30px;
}
.prev-next-btn.prev {
left: 30px;
}
.contentCard {
width: 100%
}
Link to the code

Change the image size on hover without changing the parent div's size

I have a question. I need to change the image size on hover without changing the parent div's size. Also, I have some tags inside the same div with the image. When I add hover on image and give some pxs to width and height, the tags move with the image.
img {
width: 200px;
height: 200px;
}
img:hover {
width: 250px;
height: 250px;
overflow: hidden;
}
<div class="product-items">
<div class="desc">
<img src="https://cdn.vox-cdn.com/thumbor/v97OD-MBgNjw8p5crApucVs9RB8=/0x0:2050x1367/1800x1800/filters:focal(1025x684:1026x685)/cdn.vox-cdn.com/uploads/chorus_asset/file/22022572/bfarsace_201106_4269_012.0.jpg" alt="">
<div class="cost">
<p class="your_product">Ваш товар</p>
<p>$89.00</p>
</div>
</div>
</div>
You don't need to alter your HTML - just scale the img on hover rather than alter its width and height. Scaling will not affect the positioning of other elements as the scaled element keeps its original size as far as they are concerned.
img {
width: 200px;
height: 200px;
}
img:hover {
/*width: 250px;
height: 250px;*/
transform: scale(1.25);/* added */
overflow: hidden;
}
<div class="product-items">
<div class="desc">
<img src="https://cdn.vox-cdn.com/thumbor/v97OD-MBgNjw8p5crApucVs9RB8=/0x0:2050x1367/1800x1800/filters:focal(1025x684:1026x685)/cdn.vox-cdn.com/uploads/chorus_asset/file/22022572/bfarsace_201106_4269_012.0.jpg" alt="">
<div class="cost">
<p class="your_product">Ваш товар</p>
<p>$89.00</p>
</div>
</div>
</div>
you can do this by using the transform property
.product-items{
width: 200px;
height: 200px;
}
.img-div{
height: 100px;
width: 100%;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
transition: 0.4s;
}
div:hover img {
transform: scale(1.2,1.2);
}
<div class="product-items">
<div class="desc">
<div class="img-div">
<img
src="https://cdn.vox-cdn.com/thumbor/v97OD-MBgNjw8p5crApucVs9RB8=/0x0:2050x1367/1800x1800/filters:focal(1025x684:1026x685)/cdn.vox-cdn.com/uploads/chorus_asset/file/22022572/bfarsace_201106_4269_012.0.jpg"
alt=""
/>
</div>
<div class="cost">
<p class="your_product">Ваш товар</p>
<p>$89.00</p>
</div>
</div>
</div>
You can try add container on image and set position:relative and for img position:absolute
.img-container {
width: 200px;
height: 200px;
position: relative;
}
img {
width: 100%;
height: 100%;
position: absolute;
}
img:hover {
width: 250px;
height: 250px;
overflow: hidden;
}
<div class="product-items">
<div class="desc">
<div class="img-container">
<img src="https://cdn.vox-cdn.com/thumbor/v97OD-MBgNjw8p5crApucVs9RB8=/0x0:2050x1367/1800x1800/filters:focal(1025x684:1026x685)/cdn.vox-cdn.com/uploads/chorus_asset/file/22022572/bfarsace_201106_4269_012.0.jpg" alt="">
</div>
<div class="cost">
<p class="your_product">Ваш товар</p>
<p>$89.00</p>
</div>
</div>
</div>

CSS background-image property

here is my html:
<div id="banner" style="background-image: url("img/banner.jpg")">
<img src="img/logo.png" alt="logo" />
</div>
and this is my css:
#banner {
width: auto;
height: 100vw;
background: url("/img/banner.jpg");
I want the banner.jpg to be the background of that div with full viewport fill... what to do?
Add the following CSS code:
#banner{
width: %100;
}
This is how I would achieve the effect https://jsfiddle.net/d5Lptwut/10/
<div id="banner">
<img src="img/logo.png" alt="logo" />
</div>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#banner {
background: url('/img/banner.jpg') no-repeat center center;
height: 100%;
width: 100%;
background-size: cover;
}

I am struggling to align three images in my header

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 to vertically align an image inside a 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%;
}

Resources