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 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 center image in a div horizontally and vertically
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter { display: table-cell; text-align: center; vertical-align: middle; width: 200px; height: 200px; background-color: #999;}.wraptocenter * { vertical-align: middle;}
<div class="wraptocenter"> <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg"></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>
CSS: how to vertically and horizontally align an image?
Try this - http://jsfiddle.net/zYx4g/
This will work on image of any size and in all browsers.
.image_container {
width: 300px;
height: 300px;
background: #eee;
text-align: center;
line-height: 300px;
}
.image_container img {
vertical-align: middle;
}
Center a DIV horizontally and vertically
After trying a lot of things I find a way that works. I share it here if it is useful to anyone. You can see it here working: http://jsbin.com/iquviq/30/edit
.content {
width: 200px;
height: 600px;
background-color: blue;
position: absolute; /*Can also be `fixed`*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
max-width: 100%;
max-height: 100%;
overflow: auto;
}
How to center image vertically in div
I use this css snippet:
.selector {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Applied to your sample: https://jsfiddle.net/nhdh8ycr/4/
Center Image Vertically and Horizontally in Bootstrap Grid
If you're using Bootstrap 4 (it seems you are), you may use flex alignment classes like align-items-center justify-content-center
<div class="col d-flex align-items-center justify-content-center">
More info: https://getbootstrap.com/docs/4.1/layout/grid/#alignment
How to align an image horizontally center within a div?
apply style text-align:center to div as:
<div class="col-sm-12 col-md-12"> <div class="answer-picture col-xs-12" id="bookListDiv"> <div id="loadme" style="display:block; margin:0 auto;text-align:center"> <img src="~/images/loader.gif"/> </div> </div> </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
Related Topics
Youtube Iframe Embed - Full Screen
How to Get Rid of X and Up/Down Arrow Elements of a Input Date
Overflow-Y:Visible Not Working When Overflow-X:Hidden Is Present
How to Make Floating Div List Appear in Columns, Not Rows
Bootstrap Row Class Contains Margin-Left and Margin-Right Which Creates Problems
Centering a Div Between One That's Floated Right and One That's Floated Left
Why Would Google Use a Font Tag
Img's Max-Height Not Respecting Parent's Dimensions
Inline Svg Vs Svg File Performance
Is There a Vr (Vertical Rule) in HTML
Twitter Bootstrap: Column Re-Ordering for Full Width Divs
Can HTML5 Websockets Connect 2 Clients (Browsers) Directly Without Using a Server? (P2P)
Cross-Browser Link to File on Local System
Difference Between HTML Link Media and CSS Media Queries
Google Maps Height 100% of Div Parent
HTML5 Alternative to Flash-Based Zeroclipboard for Safe Copying of Data to Clipboard