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;
}
For a web application, I'm to position an animated emoji along with some text in a div. These elements are to remain separated in a fully responsive way. Behold:
I'm using flex to accomplish this. That ensures that even if the screen size becomes extremely small, separation is still kept by stacking these one on top of the other.
To accomplish it, the whole outer div is wrapped in:
.act{
display: flex;
flex-wrap: wrap;
background-color: #E1F5FE;
padding: 10px;
border-radius: 10px;
align-items: center;
}
Next, the animated image inside the div is wrapped in:
.anim {
flex: 1 1;
min-width: 64px;
text-align: center;
}
.anim > img {
width: 100%;
height: auto;
max-width: 50px;
}
Lastly, the text along with the image is wrapped in:
.txt {
flex: 1 1 180px;
text-align: center;
}
Did you notice the tear drops on the emoji? Those are separate from the image, and are to be animated in html5.
I can't figure out how to ensure those tear drops stay precisely around the eyes of the emoji. I have tried using a z-index alongwith position:absolute (e.g. see the following):
<div class="anim">
<div class="tear" style="z-index:2;position:absolute;margin-top: 30px;margin-left: 110px;"></div>
<div class="tear" style="z-index:2;position:absolute;margin-top: 30px;margin-left: 84px;"></div>
<img src="sad.png">
</div>
This isn't responsive at all.
Moreover, If I try usingposition:relative, that makes it impossible to overlap the tear shape over the emoji, regardless of what z-index I set.
Please help me fix this situation. Ideally, I want to stick to using flex because otherwise, it's perfect for my needs.
Note: Answers to a similar SO question don't help since I've already included what they're suggesting.
To accomplish that you need a wrapper around the image and text, that take the size of the image.
Here is a sample code, where I added an extra wrapper, image, around the anim, and then made the anim display as inline block.
Here the image wrapper become the flex item instead, and will allow the anim to behave and be sized as the image, and create the boundaries you need to be able to place the eyes at a fixed position on top the image.
Stack snippet
.act {
display: flex;
flex-wrap: wrap;
background-color: #E1F5FE;
padding: 10px;
border-radius: 10px;
align-items: center;
}
.image {
flex: 1 1;
min-width: 64px;
text-align: center;
}
.anim {
display: inline-block;
position: relative;
}
.anim>img {
width: 100%;
max-width: 50px;
}
.txt {
flex: 1 1 180px;
text-align: center;
}
.tear {
position:absolute;
top: 10px;
left: 30px;
width: 10px;
height: 10px;
background: blue;
}
.tear:first-child {
left: 10px;"
}
<div class="act">
<div class="image">
<div class="anim">
<div class="tear"></div>
<div class="tear"></div>
<img src="http://placehold.it/150">
</div>
</div>
<div class="txt">
Some text
</div>
</div>
UPDATE:
I don't know why I was downvoted, if someone could tell me what I did wrong it would be cool, If you are sure about your answer I could accept a No or yes as answer and a simple idea of how to do it.
.gallery {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
.gallery img {
min-width: 33%;
max-width: 33%;
min-height: 120px;
max-height: 120px;
}
<div class="gallery">
<!--Images users provide examples:-->
<img src="https://unsplash.it/200">
<img src="https://unsplash.it/200/100">
<img src="https://unsplash.it/100/300">
<!--etc...-->
</div>
That's ok but I noticed that some images look ugly because they are horizontal images or vertical and I'm giving them a squared shape (I don't like how they look when I give them width/height auto because they all together look disordered and bad).
What I recently did was In another part of the web was to do something like:
.image-cool {
min-width: 230px;
max-width: 230px;
min-height: 280px;
max-height: 280px;
/*Has a rectangle shape*/
background: #eee;
}
.image-cool img {
max-width: 230px;
max-height: 230px;
}
<div class="image-cool">
<img src="https://unsplash.it/200">
</div>
That last code works in the next way:
If you put multiple divs with images inside all will be aligned in the screen and the images will adjust its width and height limited by their container and images don't look bad anymore.
The question here is if I could achieve the same result of the second code in the first code using CSS and without adding more HTML like a div or container.
Why would I not want another div?
Because the current HTML of the first part is essential in that way for some long scripts, Yeah I could modify it all but It will take time and I'm just asking to see if I can save some time.
Thanks a lot for your time! :)
Instead of using img tag, you can use background-image and background-size: cover on a div therefore any image size can fit into the element.
.gallery {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: center;
}
.gallery-image {
width: 33%;
height: 120px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="gallery">
<div class="gallery-image" style="background-image:url(https://unsplash.it/100/300)"></div>
<div class="gallery-image" style="background-image:url(https://unsplash.it/200/100)"></div>
<div class="gallery-image" style="background-image:url(https://unsplash.it/200)"></div>
</div>
I have two questions. Essentially, I want to display an image in its original size and place it in the middle of the screen(by middle I mean in the "horizontal" middle not the center of the screen), and then place a div with texts right below this image. This is the code I use:
<div class="figure">;
<img src="...">;
</div>';
<div class="text">
text here
</div>
This is the css:
.figure{
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:10px;
top:30px;
}
.figure img{
margin-left: auto;
margin-right: auto;
display: block;
height:100%;
width:100%；
}
I have two questions. The first one is when the image height is theoritcally longer than the screen height, there is no vertical scrollbar, the image just got resized to fit the screen. The second question is how can I place the text below the image without knowing the size of the image? I tried figcaption but it doesn't work.
To make it perfect center, you might need min-height: 100vh; and min-width: 100vw; then use display flex to center it. Otherwise, you might not center it vertically.
Also, move your text block inside one div with the img.
by default, the img will not resize unless you specify it.
By default div has display block so it will take the whole row, with text-align: center; it will just center your text.
.figure {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-width: 100vw;
}
.centered {
text-align: center;
}
html,
body {
padding: 0;
margin: 0;
}
<div class="figure">
<div>
<img src="http://placehold.it/950x450">
<div class="centered">
text here
</div>
</div>
</div>
First of all I I assume this does what you have in mind.
html
<img src="https://static.tumblr.com/07f1e3ffdfdd03631d00e7792ea3fa93/mja6mxp/AUUna8jev/tumblr_static_tumblr_static_88o50pnpc3k04gw0ck888o80o_640.jpg"/>
<div class="text">Isn't that pretty!</div>
CSS
body {
color: #eee;
background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
}
img {
margin: 0 auto;
display: block;
}
.text {
margin: 0 auto;
display: table;
}
Your first question about why the image is resized when it's bigger than the page. I have to point out that in your CSS you set the image to be the 100% the of the possible width and height and by default, the images will be stretched to fit the element.
To answer your second question, because your "figure" div containing the img position is absolute it ignores the position of other elements. Change position to another type such as "position: relative" and it will position its self with other elements in mind.
I'm not the most confident in html and css skills but I hope my two cents at least helps you press on forward.
I'm a beginner at CSS and HTML so I'm sure this is a mess. But what I'm trying to do is center 3 images side by side in a horizontal center in CSS. I've tried different solutions have gotten them to align properly but they still stay stuck to the left of the page or will stack on top of each other (and sometimes overlap).
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
And my CSS:
#imagesMain{
display: inline-block;
position:relative;
padding: 0;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
text-align:center;
}
#imagesMain img{
height: 400px;
width: 300px;
vertical-align: center;
}
The images by default are huge. the 2nd CSS block resizes them but I can't get them to do much else. Any ideas?
You can use the almost same CSS, but with one simple correction, change:
vertical-align: middle;
And remove these:
display: inline-block;
position: relative;
There's no center here. It must be middle. Please correct it. And remove display: inline-block from the <div>. Your final code should be like:
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain img {
height: 400px;
width: 300px;
vertical-align: middle;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
Click on Run Code Snippet and press Full Page to check if this is what you are expecting.
Try changing display: inline-block to display: block (as well as removing margin-left: auto; margin-right: auto;. If you're ok with #imagesMain taking up 100% of the width of the screen, with the images centered inside, this will work fine.
try learing flexbox because it has many uses for nicely aligning items and content.
it also keeps your css very small.
if you would like to keep them centered al the time. you should use justify-content: center;
#imagesMain{
display: flex;
justify-content: center;
}
#imagesMain img{
height: 400px;
width: 300px;
margin: 0 10px;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
for alternative uses look at css tricks they give good examples for how to use flexbox.
Probably your problem is the container, because the image are correct align to the center, I have simplify your code and colored the container and images:
#imagesMain{
position:relative;
display: inline-block;
width:100%;
height:250px;
margin-top:20px;
background-color:red;
text-align:center;
}
#imagesMain img{
background-color:blue;
height: 200px;
width: 150px;
margin-left:-4px; /* trick for remove the space beetwen */
}
https://jsfiddle.net/bcpph0pp/1/
UPDATE
Reading other comments I think you want all aligned in the middle, this is a good resource for generate the code for FLEX BOX: http://the-echoplex.net/flexyboxes/
And this is the example: https://jsfiddle.net/bcpph0pp/2/