Is the property text-align: center;
a good way to center an image using CSS?
img {
text-align: center;
}
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 spec.
Use this instead:
img.center {
display: block;
margin: 0 auto;
}
text-align
works just as well on them.
– Madara Uchiha♦
Apr 7 '15 at 14:50
That doesn't always work... if it doesn't, try:
img {
display: block;
margin: 0 auto;
}
Came across this post and it worked for me:
img {
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;
}
(Vertical and horizontal alignment)
Another way of doing would be centering an enclosing paragraph:
<p style="text-align:center"><img src="..."/></p>
text-align: center
is a good way to center an image, and did not specify that the property had to be a part of the img tag. This answer uses the property in question in an effort to provide a solution (that does work).
– MandM
Mar 19 '13 at 22:19
You can do:
<center><img src="..." /></center>
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
).
span
element is display: inline;
by default, so this runs into the same problem as placing text-align: center;
on the img
itself. You must set the span
to display: block;
or replace it with a div
for this to work.
– Web_Designer
May 22 '17 at 20:05
Only if you need to support ancient IE browsers.
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;
}
Only issue ihere 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.
There are three methods for centering an element that I can suggest.
using text-align
property
.parent {
text-align: center;
}
<div class="parent">
<img src="https://placehold.it/60/60" />
</div>
using margin
property
img {
display: block;
margin: 0 auto;
}
<img src="https://placehold.it/60/60" />
using 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: 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>
img
inside a justified div
in a WebView
with CSS injection. Thank you!
– JorgeAmVF
Nov 16 '18 at 22:19
if you are using a class with image then the following will do
class{
display: block;
margin: 0 auto;
}
if it is only an image in a specific calss that you want to center align then following will do
class img {
display: block;
margin: 0 auto;
}
img.class
or add an img.class
version too. Thx for this.
– Chuck Savage
Dec 15 '15 at 19:32
img{
display: block;
margin-right: auto;
margin-left: auto;
}
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
}
On the container holding image You can use css3 flex box to perfectly center the image inside, both vertically and horizontally. Let assume You have as 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.
If you want to set the image as background, I've got solution:
.image{
background-image: url(yourimage.jpg);
background-position: center;
}
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 an other 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.
text-align
property: and may be you would not like this side effect.References
I would use a div to center align an image. As in:
<div align="center"><img src="your_image_source"/></div>
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% /* doesn't matters much if using left and width */
}
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%;
}
margin: 0 auto;
? The key is setting margin-left
and margin-right
to auto
. margin: 0 auto;
is just a shortcut for that.
– Web_Designer
Apr 25 '16 at 19:49
margin: 0 auto
, margin: 0
, and margin: auto
, none worked. Note that in Chrome's inspector, when using margin: 0 auto
, is strikes the property with an exclamation mark saying invalid property value
(or whatever that means that)
– OverCoder
Apr 25 '16 at 20:03
relative
positioning rather than absolute
, both work pretty well.
– OverCoder
Sep 28 '16 at 12:28
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 wordpress admin inside the pages. When we insert the images in side the content and want to align that center. Code is display as:
**<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**
in that case you can add css like this:
article p img{ margin:0 auto; display:block; text-align:center; float:none; }
Hope it will help in that situation.
<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 for center image in laravel frame work.
The simplest solution I found was to add this to my img-element:
style="display:block; margin: auto;"
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 and Chrome and Edge.
auto auto auto auto
and 0 auto
means 0 auto 0 auto
... and by default auto for bottom and top margin is 0
so adding 0 or not is exactly the same in this case which make you answer a nth-duplicate of ones already provided
– Temani Afif
Nov 12 '18 at 21:13
auto
, auto auto
, auto auto auto
, auto auto auto auto
, 0 auto 0
, 0 auto
, 0 auto 0 auto
, and so on ... you think each one deserve a different answer? I don't think so.
– Temani Afif
Nov 13 '18 at 19:55
i++
are the same as i+=1
)
– Temani Afif
Nov 15 '18 at 1:28
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?