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.
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>
Center image horizontally within a div
#artiststhumbnail a img {
display:block;
margin:auto;
}
Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/
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.
How to center an image in the middle of a div?
Simple and easy method to do this,
.test { background-color: orange; width: 700px; height: 700px; display:flex; align-items:center; justify-content:center;}
<div class="test"><img src="http://via.placeholder.com/350x150"></div>
Center Image Vertical and Horizontal
You could try using a div
in your HTML like this:
<div id='dv'></div>
And using a background image like this:
#dv {
background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
background-position: center;
}
html,body,#dv { /* so that the #dv can fill up the page */
width:100%;
height:100%;
}
Fiddle
How to center image inside a div, using CSS?
the parent (#loading
) height is the height of the child element (img
). because vertical alignment doesn't make sense. set the parent of the greater height, then the inner element can be centered vertically by any available means.
* { padding: 0; margin: 0;}
.overlay { background: #e9e9e9; opacity: 0.5;}
#loading { display: flex; height: 100vh;}
#loading img { margin: auto;}
<div class="overlay"> <div id="loading"> <img src="http://placehold.it/160x120"> </div></div>
Related Topics
Using Mailto to Send Email With an Attachment
How to Position Elements Next to Each Other in a Div
How to Place Div in Top Right Hand Corner of Page
Table With Fixed Header and Fixed Column on Pure CSS
How to Prevent Flex-Items from Overflowing Flex Parent With No Wrap
How to Force Position Absolute With 100% Width to Fit into Parent Div With Padding
Open an Exe File Through a Link in a HTML File
Angular - Show Empty Row by Default in Drop Down List and Disable Button
Nested Ngfor Looping Over an Array of Objects
Angular, Image Not Found (Get 404)
Html/Css - Make Alert Disappear After a Few Seconds
Why Doesn't the Height of a Container Element Increase If It Contains Floated Elements
How to Overlay One Div Over Another Div
How to Change the Style of the Title Attribute Inside an Anchor Tag
My Inline-Block Elements Are Not Lining Up Properly
Is It Valid to Replace Http:// With // in a ≪Script Src="Http://..."≫
Transform3D' Not Working With Position: Fixed Children
How to Limit the Visible Options in an HTML <Select> Dropdown