Centering an image within a div
Try setting the image’s display
property to block
:
banner {
height: 100px;
width: 960px;
padding-bottom: 10px;
}
banner img {
border: none;
display: block;
margin: 0 auto;
}
How to center image horizontally within a div element?
#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.
Center image in div horizontally
Every solution posted here assumes that you know the dimensions of your img
, which is not a common scenario. Also, planting the dimensions into the solution is painful.
Simply set:
/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;
or
/* for the img inside your div */
display: block;
margin: 0 auto;
That's all.
Note, that you'll also have to set an initial min-width
for your outer div
.
How to vertically align an image inside a div
The only (and the best cross-browser) way as I know is to use an inline-block
helper with height: 100%
and vertical-align: middle
on both elements.
So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;}
.helper { display: inline-block; height: 100%; vertical-align: middle;}
img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px;}
<div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
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 IMG/ inside a DIV with CSS
You can make it work if you wrap another element around the image:
<div class="outer">
<div class="inner"><img src="" alt="Sample Image" /></div>
</div>
And the following CSS:
.outer {
width: 300px;
border: 1px solid red;
overflow: hidden;
*position: relative;
}
.inner {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
The position: relative
on the .outer
is marked with *
so it only applies to IE6/7. You could move it to a conditional IE stylesheet if that's what you prefer, or remove the *
altogether. It's needed to avoid the now relatively positioned children from overflowing.
How to center div that contains an image within a div?
This approach works perfectly for dynamic content of unknown dimensions.
jsFiddle example
Basically, we are using vertical-align:middle
for vertical centering, and text-align:center
for horizontal centering. In order for vertical-align:middle
to work on a div
, we need to set the parent elements to display:table
, and the targeted child div
to display:table-cell
. Sure you could achieve such centering with absolute
positoning, however, that would require you to know the dimensions of the img
. This approach works for unknown dimensions.
HTML
<div class="container">
<div class="box">
<img src="http://placehold.it/200x200">
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0px;
}
.container {
display:table;
vertical-align:middle;
text-align:center;
height:100%;
width:100%;
}
.box {
display:table-cell;
vertical-align:middle;
}
Related Topics
Fixed Header, Footer, and Sidebars with Scrolling Content Area in Center
Make Anchor Links Refer to The Current Page When Using <Base>
How to Insert a Template into Another Template
CSS Filter Not Working in Firefox
CSS Way to Horizontally Align Table
Should Tables Be Avoided in HTML at Any Cost
How to Prevent Background Scrolling When Bootstrap 3 Modal Open on Mobile Browsers
CSS/HTML: How to Change The Color of The Check Mark Within The Checkbox Input
Alternate Background Colors for List Items
CSS Calc Not Working in Safari and Fallback
Bootstrap 3 - Show Collapsed Navigation for All Screen Sizes
Why Is a Trailing Punctuation Mark Rendered at The Start with Direction:Rtl
Remove .HTML and .PHP Extensions with .Htaccess
Autoplay Audio on Mobile Safari