Is the property text-align: center; a good way to center an image using CSS?
img {
text-align: center;
}
That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element. See the W3C specification.
Use this instead:
img.center {
display: block;
margin: 0 auto;
}
<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
That doesn't always work... if it doesn't, try:
img {
display: block;
margin: 0 auto;
}
I came across this post, and it worked for me:
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div style="border: 1px solid black; position:relative; min-height: 200px">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
(Vertical and horizontal alignment)
Not recommendad:
Another way of doing it would be centering an enclosing paragraph:
<p style="text-align:center"><img src="https://via.placeholder.com/300"></p>
Update:
My answer above is correct if you want to start learning HTML/CSS, but it doesn't follow best practices
Actually, the only problem with your code is that the text-align attribute applies to text (yes, images count as text) inside of the tag. You would want to put a span tag around the image and set its style to text-align: center, as so:
span.centerImage {
text-align: center;
}
<span class="centerImage"><img src="http://placehold.it/60/60" /></span>
The image will be centered. In response to your question, it is the easiest and most foolproof way to center images, as long as you remember to apply the rule to the image's containing span (or div).
You can do:
<center><img src="..." /></center>
There are three methods for centering an element that I can suggest:
Using the text-align property
.parent {
text-align: center;
}
<div class="parent">
<img src="https://placehold.it/60/60" />
</div>
Using the margin property
img {
display: block;
margin: 0 auto;
}
<img src="https://placehold.it/60/60" />
Using the position property
img {
display: block;
position: relative;
left: -50%;
}
.parent {
position: absolute;
left: 50%;
}
<div class="parent">
<img src="https://placehold.it/60/60" />
</div>
The first and second methods only work if the parent is at least as wide as the image. When the image is wider than its parent, the image will not stay centered!!!
But:
The third method is a good way for that!
Here's an example:
img {
display: block;
position: relative;
left: -50%;
}
.parent {
position: absolute;
left: 50%;
}
<div class="parent">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>
On the container holding image you can use a CSS 3 Flexbox to perfectly center the image inside, both vertically and horizontally.
Let's assume you have <div class="container"> as the image holder:
Then as CSS you have to use:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
And this will make all your content inside this div perfectly centered.
Only if you need to support ancient versions of Internet Explorer.
The modern approach is to do margin: 0 auto in your CSS.
Example here: http://jsfiddle.net/bKRMY/
HTML:
<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>
CSS:
p.pic {
width: 48px;
margin: 0 auto;
}
The only issue here is that the width of the paragraph must be the same as the width of the image. If you don't put a width on the paragraph, it will not work, because it will assume 100% and your image will be aligned left, unless of course you use text-align:center.
Try out the fiddle and experiment with it if you like.
img{
display: block;
margin-right: auto;
margin-left: auto;
}
If you are using a class with an image then the following will do
class {
display: block;
margin: 0 auto;
}
If it is only an image in a specific class that you want to center align then following will do:
class img {
display: block;
margin: 0 auto;
}
The simplest solution I found was to add this to my img-element:
style="display:block;margin:auto;"
It seems I don't need to add "0" before the "auto" as suggested by others. Maybe that is the proper way, but it works well enough for my purposes without the "0" as well. At least on latest Firefox, Chrome, and Edge.
Simply change parent align :)
Try this one on parent properties:
text-align:center
You can use text-align: center on the parent and change the img to display: inline-block → it therefore behaves like a text-element and is will be centered if the parent has a width!
img {
display: inline-block
}
To center a non background image depends on whether you want to display the image as an inline (default behavior) or a block element.
Case of inline
If you want to keep the default behavior of the image's display CSS property, you will need to wrap your image inside another block element to which you must set text-align: center;
Case of block
If you want to consider the image as a block element of its own, then text-align property does not make a sens, and you should do this instead:
IMG.display {
display: block;
margin-left: auto;
margin-right: auto;
}
The answer to your question:
Is the property text-align: center; a good way to center an image
using CSS?
Yes and no.
Yes, if the image is the only element inside its wrapper.
No, in case you have other elements inside the image's wrapper because all the children elements which are siblings of the image will inherit the text-align property: and may be you would not like this side effect.
References
List of inline elements
Centering things
.img-container {
display: flex;
}
img {
margin: auto;
}
this will make the image center in both vertically and horizontally
I would use a div to center align an image. As in:
<div align="center"><img src="your_image_source"/></div>
If you want to set the image as the background, I've got a solution:
.image {
background-image: url(yourimage.jpg);
background-position: center;
}
One more way to scale - display it:
img {
width: 60%; /* Or required size of image. */
margin-left: 20% /* Or scale it to move image. */
margin-right: 20% /* It doesn't matters much if using left and width */
}
Use this to your img CSS:
img {
margin-right: auto;
margin-left: auto;
}
Use Grids To Stack images. It is very easy here is the code
.grid {
display:grid;
}
.grid img {
display:block;
margin:0 auto;
}
If your img element is inside a div, which is itself inside another div whose display has been set as flexbox, as in my case here:
(HTML)
<nav class="header">
<div class="image">
<img
src=troll
alt="trollface"
></img>
</div>
<div class="title">
Meme Generator
</div>
<div class="subtitle">
React Course - Project 3
</div>
</nav>
(CSS)
.header{
display: flex;
}
.image{
width: 5%;
height: 100%;
}
.image > img{
width: 100%;
}
You could set your .image div to align itself vertically by doing this:
.image{
width: 5%;
height: 100%;
align-self: center;
}
display: block with margin: 0 didn't work for me, neither wrapping with a text-align: center element.
This is my solution:
img.center {
position: absolute;
transform: translateX(-50%);
left: 50%;
}
translateX is supported by most browsers
I discovered that if I have an image and some text inside a div, then I can use text-align:center to align the text and the image in one swoop.
HTML:
<div class="picture-group">
<h2 class="picture-title">Picture #1</h2>
<img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
<p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
</div>
CSS:
.picture-group {
border: 1px solid black;
width: 25%;
float: left;
height: 300px;
#overflow:scroll;
padding: 5px;
text-align:center;
}
CodePen:
https://codepen.io/artforlife/pen/MoBzrL?editors=1100
Sometimes we directly add the content and images on the WordPress administrator inside the pages. When we insert the images inside the content and want to align that center. Code is displayed as:
**<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**
In that case you can add CSS content like this:
article p img{
margin: 0 auto;
display: block;
text-align: center;
float: none;
}
Use:
<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>
I think this is the way to center an image in the Laravel framework.
To center an image with CSS.
img{
display: block;
margin-left: auto;
margin-right: auto;
}
You can learn more here
If you want to center image to the center both vertically and horizontaly, regardless of screen size, you can try out this code
img{
display: flex;
justify-content:center;
align-items: center;
height: 100vh;
}
I want to set an image centre of div & just next it want to set a new image in the same line. I don't want to set it in next line.
I have tried below code it set first image in centre but not other image next to it. It put image in next line.
div {
margin: 0 auto;
overflow: auto;
background: #0cf;
}
<div>
<img src="../images/catchBug.png" alt="img1">
<img src="../images/signature.png" alt="img2">
</div>
The easiest way is to give the parent div text-align: center and position: absolute to the bottom img:
div {
/*position: relative; optional, depends on the image/divs size*/
margin: 0 auto;
overflow: auto;
background: #0cf;
text-align: center;
}
.abs {
position: absolute; /*taken out of the normal document flow; will overflow the parent div since its position is commented out, uncomment if you don't want that*/
}
/* addition */
img {vertical-align: bottom} /*removes bottom margin/whitespace*/
<div>
<img src="http://placehold.it/100x100" alt="img1">
<img src="http://placehold.it/125x125" alt="img2" class="abs">
</div>
As long as you don't want flexbox:
If you've got only two pictures in that row and there won't be more you can always hardcode values of width and margin like this (but remember not to use HTML tags in CSS, it's a bad practice):
img{
display: inline-block;
width: __WIDTH_THAT_IS_WIDE_ENOUGH__;
margin: 0 __WIDTH_THAT_FITS__;
}
I hope I got your question needs well. Try this
.main {
/*Introduce a fixed width so that your margin: 0 auto; can be put to work. This will center the div*/
width: 500px;
margin: 0 auto;
overflow: auto;
background-color: #0CF;
}
.main img {
/*Restrict to inline-block for images
because https://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level*/
display: inline-block;
/*Define a width for the images to keep them in the container 500px*/
width: 48%;
}
<div class="main">
<img src='https://images.unsplash.com/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2e1f776c8e5286b86dca14edbd302243' alt='' />
<img src='https://images.unsplash.com/photo-1511290156538-08919a92771d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e4b4923f61050049c740fde4e35dd168' />
</div>
I have an image inside a DIV. I want the image to shrink if the size of the div goes below the size of the image. Bu I also want the image to be centered in the DIV.
This is my HTML:
<div id="logo">
<img src="/images/logo_2016.jpg">
</div>
This is my CSS
#logo img {
max-width:800px;
width: 100%;
}
This works to resize the image exactly like I want but the image is not centered in the DIV. If I try to center the image with:
#logo img {
margin:auto;
max-width:800px;
width: 100%;
}
Then it is centered but no longer resizes with the div.
How can I get it to do both? Thanks.
You forgot to add display: block;.
#logo img {
margin:auto;
max-width:800px;
width: 100%;
display: block; /* new */
}
You can add display:block; to the image element. You can also set the text-align:center for the #logo element which is kind of a hack to it.
JSFiddle: https://jsfiddle.net/
Try setting #logo to a max-width also and place a text-align: center on the image, with you can style as an inline-block. See this fiddle:
https://jsfiddle.net/7ewcbr95/
#logo {
max-width: 1000px;
height: auto;
text-align: center;
background: #333;
}
#logo img {
max-width:800px;
display: inline-block;
}
<div id="logo">
<img src="http://placehold.it/350x150">
</div>
I am trying to achieve the following configuration of elements for a webpage:
[Left Icon Image]<-padding->[Horizontally Centered Icon Image]<-padding->[Right Icon Image]
Each icon has some text below it which is centered relative to it's own center What is the best way to achieve this using HTML and CSS?
You didn't post any code so normally I wouldn't help but since this isn't that hard and there are many ways to do this I will show you one.
HTML:
<div id="con">
<div>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" />
<span>Text under the first one</span>
</div>
<div>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" />
<span>Test under the second</span>
</div>
<div>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" />
<span>And third</span>
</div>
</div>
CSS:
#con {
width: 600px;
height: 200px;
margin: 0 auto;
}
#con div {
width: 200px;
height: 200px;
float: left;
text-align: center;
}
#con div img {
width: 200px;
}
So here we create 3 "boxes" that will contain each image with text. We set the width and height then use float. Now we need to put them in a container so we can center them using margin: 0 auto;.
From there it's just get the image you want in the boxes and type your text under it. I put a span so you can see where it is a bit better + you can style it using the span.
DEMO HERE
Here is one with a margin around each so they push away from eachother. Don't want to use padding as that's inside the element (I guess you could but margin would be better).
CSS:
#con {
width: 660px;
height: 200px;
margin: 0 auto;
}
#con div {
width: 200px;
height: 200px;
float: left;
text-align: center;
margin: 0 10px;
}
We added a margin to #con div and then have to change the #con width to account for the newly added 60px caused by the margin.
DEMO HERE
I have an image of 400px and a div that is smaller (the width is not always 300px as in my example). I want to center the image in the div, and if there is an overflow, hide it.
Note: I must keep the position:absolute on the image. I'm working with css-transitions, and if I use position:relative, my image shakes a bit (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/).
jsfiddle
http://jsfiddle.net/wjw83/1/
You should make the container relative and give it a height as well and you're done.
http://jsfiddle.net/jaap/wjw83/4/
.main {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 200px;
}
img.absolute {
left: 50%;
margin-left: -200px;
position: absolute;
}
<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
If you want to you can also center the image vertically by adding a negative margin and top position: http://jsfiddle.net/jaap/wjw83/5/
None of the above solutions were working out well for me. I needed a dynamic image size to fit in a circular parent container with overflow:hidden
.circle-container {
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
}
.circle-img img {
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
}
Working example here:
http://codepen.io/simgooder/pen/yNmXer
Most recent solution:
HTML
<div class="parent">
<img src="image.jpg" height="600" width="600"/>
</div>
CSS
.parent {
width: 200px;
height: 200px;
overflow: hidden;
/* Magic */
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
Found this nice solution by MELISSA PENTA (https://www.localwisdom.com/)
HTML
<div class="wrapper">
<img src="image.jpg" />
</div>
CSS
div.wrapper {
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
}
div.wrapper img {
margin:-100%;
}
Center any size image in div
Used with rounded wrapper and different sized images.
CSS
.item-image {
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
}
.item-image img {
height: 200px;
margin: -100%;
max-width: none;
width: auto;
}
Working example here codepen
For me flex-box worked perfect to center the image.
this is my html-code:
<div class="img-wrapper">
<img src="..." >
</div>
and this i used for css:
I wanted the Image same wide as the wrapper-element, but if the height is greater than the height of the wrapper-element it should be "cropped"/not displayed.
.img-wrapper{
width: 100%;
height: 50%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
height: auto;
width: 100%;
}
working solution with flex-box for posterity:
main points:
overflow hidden for wrapper
image height and width must be specified, cannot be percentage.
use any method you want to center the image.
wrapper {
width: 80;
height: 80;
overflow: hidden;
align-items: center;
justify-content: center;
}
image {
width: min-content;
height: min-content;
}
<html>
<head>
<style type="text/css">
.div-main{
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
}
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
just make sure how you are using image through css background use backgroud image position like background: url(your image path) no-repeat center center; automatically it wil align center to the screen.
this seems to work on our site, using your ideas and a little math based upon the left edge of wrapper div. It seems redundant to go left 50% then take out 50% extra margin, but it seems to work.
div.ImgWrapper {
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
}
img.CropCenter {
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
}
<div class="ImgWrapper">
<img class="CropCenter" src="img.png">
</div>
I have been trying to implement Jaap's answer inside this page of my recent site, with one difference : the .main {height:} was set to auto instead of a fixed px value.
As responsive developer i am looking for a solution to synchronize the image height with the left floating text element, yet only in case my text height becomes greater then my actual image height.
In that case the image should not be rescaled, but cropped and centered as decribed in the original question here above.
Can this be done ?
You can simulate the behaviour by slowly downsizing the browser's width.
This issue is a huge pain in the a.. but I finally got it.
I've seen a lot of complicated solutions. This is so simple now that I see it.
.parent {
width:70px;
height:70px;
}
.child {
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
}
.child img {
display:block; /* won't work without this */
height:100%;
margin:0 auto;
}
you the have to corp your image from sides to hide it try this
3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...
one of the demo for the first way on the site above
try demo
i will do some reading on it too