Center image using text-align center?
HtmlCssHtml Problem Overview
Is the property text-align: center;
a good way to center an image using CSS?
img {
text-align: center;
}
Html Solutions
Solution 1 - Html
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>
Solution 2 - Html
That doesn't always work... if it doesn't, try:
img {
display: block;
margin: 0 auto;
}
Solution 3 - Html
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)
Solution 4 - Html
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
Solution 5 - Html
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
).
Solution 6 - Html
You can do:
<center><img src="..." /></center>
Solution 7 - Html
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" />
-
Using the
margin
propertyimg { display: block; margin: 0 auto; }
https://placehold.it/60/60" />
-
Using the
position
propertyimg { display: block; position: relative; left: -50%; } .parent { position: absolute; left: 50%; }
https://placehold.it/60/60" />
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>
Solution 8 - Html
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.
Solution 9 - Html
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.
Solution 10 - Html
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;
}
Solution 11 - Html
img{
display: block;
margin-right: auto;
margin-left: auto;
}
Solution 12 - Html
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.
Solution 13 - Html
Simply change parent align :)
Try this one on parent properties:
text-align:center
Solution 14 - Html
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
}
Solution 15 - Html
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
Solution 16 - Html
.img-container {
display: flex;
}
img {
margin: auto;
}
this will make the image center in both vertically and horizontally
Solution 17 - Html
If you want to set the image as the background, I've got a solution:
.image {
background-image: url(yourimage.jpg);
background-position: center;
}
Solution 18 - Html
I would use a div to center align an image. As in:
<div align="center"><img src="your_image_source"/></div>
Solution 19 - Html
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 */
}
Solution 20 - Html
Use this to your img
CSS:
img {
margin-right: auto;
margin-left: auto;
}
Solution 21 - Html
Use Grids To Stack images. It is very easy here is the code
.grid {
display:grid;
}
.grid img {
display:block;
margin:0 auto;
}
Solution 22 - Html
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%;
}
Solution 23 - Html
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
Solution 24 - Html
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;
}
Solution 25 - Html
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.
Solution 26 - Html
To center an image with CSS.
img{
display: block;
margin-left: auto;
margin-right: auto;
}
You can learn more here
Solution 27 - Html
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;
}