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;
}
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 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 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 align image vertically & horizontally on a web page
Check this article out by Chris Coyier on CSS-Tricks. I think it might help out. I ran into the same problem a few days ago and his answer worked for me.
Centering an image horizontally and vertically
Basically the idea is, if your image has a set width and height. You can absolute position it from the left and top 50% and then do negative margins equal to half of the width and height to bring it back dead center. They're are other ways to vertically center an image if it doesn't have set dimensions.
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
Center image vertically and horizontally in flexbox
.grid-right {
display: flex; /* new */
align-items: center; /* new */
justify-content: center; /* new */
width: 67%;
height: 100vh;
background-size: cover;
text-align: center;
}
revised codepen
Image center align vertically and horizontally
There's a few good ways to both horizontally and vertically center an element, it just comes down to the situation and your preference.
With the following markup:
<div><img src="a.png" width="100" height="100"></div>
line-height
div { width:300px; height:300px; line-height:300px; text-align:center; }
div img { vertical-align:middle; }
Good quick fix without messing with position
ing too much but if actually text is being centered this way could be problematic.
display:table-cell
div { width:300px; height:300px; text-align:center; display:table-cell; vertical-align:middle; }
Works just like good old tables and highly flexible, however only supported in modern browsers.
position:absolute
div { width:300px; height:300px; position:relative; }
div img { top:-50px; left:-50px; position:absolute; margin:50% 0 0 50%; }
top
and left
offsets should be set to half the respective dimensions of the element being positioned. Works well if the containing element needs to be flexible but absolute values are required to work.
Demo of all techniques: jsfiddle.net/Marcel/JQbea (fullscreen)
Related Topics
In Angularjs, Any Inline JavaScript Code That Included in HTML Templates Doesn't Work
Differencebetween $(Window).Load and $(Document).Ready
Es6 Object Destructuring Default Parameters
JavaScript Date Object Comparison
Can JavaScript Access a Filesystem
Prevent Redirection of Xmlhttprequest
What Does the ^ (Caret) Symbol Do in JavaScript
Chrome 65 Blocks Cross-Origin <A Download>. Client-Side Workaround to Force Download
What Is the Meaning of Polyfills in HTML5
What Is the Purpose of the HTML "No-Js" Class
How to Prevent an Http Request Just for a Favicon
What Is the Current State of the Art in HTML Canvas JavaScript Libraries and Frameworks
How to Remove an Item from an Array in Angularjs Scope
HTML - How to Show Tooltip Only When Ellipsis Is Activated
Official Information on 'Arguments' in Es6 Arrow Functions