What I am trying to achieve:
image link
What my code currently looks like:
.half-circle {
background-color: white;
}
<div style="background-color: black;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should't be moved</div>
I've tried using padding with a white background and 500 radius, but it pushes the text down.
You can take a look at radial-gradient() and tune a bit the sizing
.half-circle {
min-height: 12vw;
padding-bottom: 4%;
background: radial-gradient(circle at top, white 17vw, transparent 17.1vw)
}
.half-circle img {
display: block;
margin: auto;
max-width: 15vw
}
<div style="background-color: black;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should'nt be moved</div>
This can be achieved with CSS if you give your .half-circle a border-bottom-left-radius and border-bottom-right-radius. That will round the bottom corners of the shape into a half circle. I also added some extra style to match your screenshot a little better.
.container {
padding-bottom: 10px;
text-align: center;
}
.half-circle {
background-color: white;
margin: 0 auto;
height: 100px;
width: 400px;
border-bottom-left-radius: 800px;
border-bottom-right-radius: 800px;
padding: 10px 0 20px;
text-align: center;
}
img {
max-height: 100%;
width: auto;
}
<div class="container" style="background-color: #000;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should't be moved</div>
I am trying to center the text underneath each image and underneath each image I want the button to be centered. I've been using paddings and margins to try to fix my problem but it's not working. Also, am I using the button and figcaption tags correctly?
figure img {
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
float: left;
display: inline-block;
margin: 0 16px 0 0;
}
figure figcaption {
display: inline-block;
float: left;
}
figcaption {
font-size: 17px;
margin: 30px 110px 30px 60px;
}
figure button {
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
}
<figure>
<img src="img/drawstring-bag.jpg" alt="drawstring-bag">
<img src="img/charm-necklace.jpg" alt="icecream-necklace">
<img src="img/phone-case.jpg" alt="phone-case">
<figcaption>Purses • Tops • Skirts</figcaption>
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Sensational Sewing</button>
<button role="button">Creative Charms</button>
<button role="button">Knockout Knitting</button>
</figure>
</div>
</main>
You were very close originally, but you need to make each "card" have it's own container. Therefore, you would want 3 figure tags, with each one containing an img, a figcaption, and a button. You could just as easily use div tags to accomplish this, but figure and figcaption give you semantic code. You could always put this group of figures inside of a div container later on, depending on how you are using it.
figure {
text-align: center;
width: 20%;
float: left;
}
img {
max-width: 100px;
border: 10px solid #a8eb6c
}
<figure>
<img src="https://www.totallypromotional.com/media/totallypromotional/images/items/TDB100/product/jpg/Polypropylene-Drawstring-Bag-TDB100-red.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</figure>
<figure>
<img src="https://cdn11.bigcommerce.com/s-zt9cwiz411/images/stencil/1280x1280/products/2076/5316/avalon_personalized_charm_necklace__39075.1508947216.jpg?c=2&imbypass=on" alt="icecream-necklace">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</figure>
<figure>
<img src="https://dimg.dillards.com/is/image/DillardsZoom/zoom/kate-spade-new-york-glitter-ombre-dot-iphone-case/05482185_zi_pink_multicolor.jpg" alt="phone-case">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</figure>
Wrap your content that you would like aligned. I've wrapped them in <div>'s and applied text-align:center the the <div>'s.
.centerContent {
text-align: center;
vertical-align: top;
}
figure {
display: inline-block;
}
figure .centerContent {
width: 28%;
display: inline-block;
}
figure div img {
border: 10px solid #a8eb6c;
height: 90%;
width: 90%;
}
figcaption {
}
figure div button {
background-color: #a8eb6c;
}
<div class="centerContent">
<figure>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</div>
<div class="centerContent">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</div>
</figure>
</div>
Also, I would like to recomend that you take a look at Bootstrap. You may find it helpful.
Hope this helps,
I hope this helps! I have used flex and wrapped a div around each element
figure img {
border: 10px solid #a8eb6c;
height: 30%;
width: 30%;
display: inline-block;
margin: 0 16px 0 0;
text-align: center;
}
figure figcaption {
display: inline-block;
text-align: center;
}
figcaption {
font-size: 17px;
margin: 30px 110px 30px 60px;
}
figure button {
background-color: #a8eb6c;
display: inline-block;
margin: 0 110px 30px 60px;
}
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.center{
text-align: center;
}
.main_container{
display: flex;
justify-content: center;
align-content: center;
}
<figure>
<div class="main_container">
<div class="container">
<div class="center"><img src="img/drawstring-bag.jpg" alt="drawstring-bag"></div>
<div class="center"><figcaption>Purses • Tops • Skirts</figcaption></div>
<div class="center"><button role="button">Sensational Sewing</button></div>
</div>
<div class="container">
<div class="center"><img src="img/charm-necklace.jpg" alt="icecream-necklace"></div>
<div class="center"><figcaption>Earrings • Pendants • Clay Necklaces</figcaption></div>
<div class="center"><button role="button">Creative Charms</button></div>
</div>
<div class="container">
<div class="center"><img src="img/phone-case.jpg" alt="phone-case"></div>
<div class="center"><figcaption>Scarves • Mittens • Plushies</figcaption></div>
<div class="center"><button role="button">Knockout Knitting</button></div>
</div>
</div>
</figure>
</main>
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%;
}