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/
Center an image inside a div?
The solution is to change the div
into a table. Normally, you shouldn't use tables for positioning, but when it comes to older non-standards-compliant browsers, sometimes that's the only choice. Demonstration here. For the record, this works on Internet Explorer 6, as well.
Code:
CSS
#theDiv
{
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#theImg
{
max-width: 190px;
max-height: 190px;
}
HTML
<table id="theDiv" style="border: solid 1px #000">
<tr>
<td>
<img id="theImg" src="http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg" />
</td>
</tr>
</table>
Here's an update that uses CSS instead of changing the markup to an actual table:
#theDiv
{
display: table;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#theImg
{
max-width: 190px;
max-height: 190px;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
vertical-align: middle;
}
<div id="theDiv" style="border: solid 1px #000">
<div class="tr">
<div class="td">
<img id="theImg" src="http://lorempixel.com/100/100/" />
</div>
</div>
</div>
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.
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 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 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
.
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 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>
Related Topics
Can an Abbr Tag's Title Be Styled
How to Create Alligator (Or Sawtooth) Border Using CSS or Svg
Clip-Path Does Not Work with Chrome
Dropdown Menu - Make the <Ul> Submenu 100% Width
Css3 Hover/Tap Doesn't Work in Mobile Browsers
Can You Reference Images from CSS Without Using Relative Paths
Vertically Center Responsive Iframe
Centering a Background Image, Using Css
CSS Transition Max-Height Back to 0 Not Working
MVC CSS Not Rendering in Visual Studio When Debugging
Associating Multiple Selectors with a Pseudo-Class
Selector for Even and Odd Level Children
Twitter Bootstrap: Add Media Queries for Xxs Breakpoint
Pure CSS Speech Bubble with Border