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 have some vertically aligned text in a div that I want to remain vertically centered when the browser resizes. As the div shrinks with the browser, my text becomes offset towards the bottom of the div.
Any suggestions?
Here is a Fiddle of the issue I'm experiencing.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
CSS:
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat left top;
background-size: 100% auto;
height: 360px;
}
.inner-wrapper {
display: table;
width: 100%;
height: 360px;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: #fff;
}
Is this what you're looking for?
The text actually does center, though the background image doesn't, hence it looks like it doesn't, so here is 2 versions (fiddle use background-size: cover) where image centers too
Updated fiddle
html, body {
height: 100%;
}
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: 100% auto;
max-height: 360px;
height: 100%;
}
.inner-wrapper {
display: table;
width: 100%;
height: 100%;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: black;
}
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
The problem is your background, the div is staying the same size and the text is staying centered, you background makes it seem not so. Like Gavin said use background-size cover.
Your problem isn't actually that your text isn't centered, because it is. Your actual issue is that your image doesn't have enough height at that size to fill the height of the container.
See the screenshot below, here I have used the element inspector to highlight the "outer-wrapper" which is the blue box you see. Notice the text is centered within it.
So to tackle the actual issue which is the image either needs to fill the div or needs to stay centered itself.
To stay centered add the following to the outer-wrapper: (Fiddle)
background-position: center;
To fill the div, remove the background-size from outer-wrapper and add this: (Fiddle)
background-position: center;
background-cover: cover;
I need to make a website and there is a button which is in the middle horizontally. I can use left 50% or margin-left but when I minimize the window - it isn't in the middle. How do I set the div to be exactly in the middle also when you minimize the window of the browser?
Edit: fixed it by doing as Trix said and adding
.center-div{
margin: 0 auto;
}
If your div has a width value, you may use:
CSS
.center-div{
width: 100px;
margin: 0 auto;
}
But, if not, you may add text-align: center to its parent and display: inline-block; to the centering div itself:
HTML
<div class="parent">
<div class="center-div">
</div>
</div>
CSS
.parent{
text-align: center;
}
.parent .center-div{
display: inline-block;
}
I am practising with making a webpage responsive for mobile screen resolutions. I succeeded with the width. How do I manage this with height? My wrappers continues to stay on top instead of vertical align.
I've seen a lot of questions about this problem, but couldn't find a solution specified on my css yet. Hope someone can help me out.
HTML
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
<div id="topleftbox"></div>
<div id="toprightbox"></div>
<div id="bottomleftbox"></div>
<div id="bottomrightbox"></div>
</div>
</div>
CSS
body {
}
.wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}
.header {
min-width: 50%;
height: 20px;
}
.content {
min-width: 500px;
width: 40%;
height: auto;
margin: 0 auto;
}
#topleftbox {
background: url(..);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: left;
}
#toprightbox {
background: url(...);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: right;
}
etc.
To use display:table-cell; you need to simulate the full table structure. Luckily you won't have to add any extra markup since you can style against the html and body tags:
html{display:table;width:100%;height:100%;}
body{display:table-row;}
.wrapper{
display:table-cell;
vertical-align:middle;
text-align:center;
}
Note: this vertically centers .wrapper's content, not the div itself.
You could use display:table to render your DIVs like tables and table cells.
More here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Unlike with centering horizontally there never has been a CSS way to center vertically. The only way is to use javascript to grab the "window.innerHeight" then add the height of the HTML element (wrapper) to it and divide the total in half. And set that as the new top position.
Also your "wrapper" has a height of 100% this should mean it fills the entire screen height. It will not center if it is the same height as the screen. Also it has a width of 100%, I doubt the "margin: 0 auto" is doing anything.
Vertical align within CSS has a few options:
1. Via table-cell. (This does work in IE8+)
{
display:table-cell;
vertical-align:middle;
}
2. line-height = height of element (If you have more than one line of text this will look funky I imagine)
{
height:10em;
line-height:10em;
}
There are more options you can find, but I believe display: table should be your best bet nowadays.
http://www.zann-marketing.com/.../vertically-centering-text-using-css.html
https://stackoverflow.com/questions/2939914/
I want my <p> element to be at the center of a container <div>, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally.
How can I achieve that?
div {
width: 300px;
height: 100px;
}
p {
position: absolute;
top: auto;
}
<div>
<p>I want this paragraph to be at the center, but it's not.</p>
</div>
You dont need absolute positioning
Use
p {
text-align: center;
line-height: 100px;
}
And adjust at will...
If text exceeds width and goes more than one line
In that case the adjust you can do is to include the display property in your rules as follows;
(I added a background for a better view of the example)
div
{
width:300px;
height:100px;
display: table;
background:#ccddcc;
}
p {
text-align:center;
vertical-align: middle;
display: table-cell;
}
Play with it in this JBin
To get left/right centering, then applying text-align: center to the div and margin: auto to the p.
For vertical positioning you should make sure you understand the different ways of doing so, this is a commonly asked problem: Vertical alignment of elements in a div
♣you should do these steps :
the mother Element should be positioned(for EXP you can give it position:relative;)
the child Element should have positioned "Absolute" and values should set like this: top:0;buttom:0;right:0;left:0; (to be middle vertically)
for the child Element you should set "margin : auto" (to be middle vertically)
the child and mother Element should have "height"and"width" value
for mother Element => text-align:center (to be middle horizontally)
♣♣simply here is the summery of those 5 steps:
.mother_Element {
position : relative;
height : 20%;
width : 5%;
text-align : center
}
.child_Element {
height : 1.2 em;
width : 5%;
margin : auto;
position : absolute;
top:0;
bottom:0;
left:0;
right:0;
}
this is how I do it:
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
background-color: lightgreen;
}
.paragraph {
width: 250px;
background-color: lightyellow;
}
<div class="container">
<p class="paragraph">I want this paragraph to be at the center, but it's not.</p>
</div>
you can add text-align: center; to the paragraph if you want text alignment to be center
You only need to add text-align: center to your <div>
In your case also remove both styles that you added to your <p>.
Check out the demo here: http://jsfiddle.net/76uGE/3/
Good Luck
Centered and middled content ?
Do it this way :
<table style="width:100%">
<tr>
<td valign="middle" align="center">Table once ruled centering</td>
</tr>
</table>
I fiddled it here
Ha, let me guess .. you want DIVs ..
just make your first outter DIV behave like a table-cell then style it with vertical align:middle;
<div>
<p>I want this paragraph to be at the center, but I can't.</p>
</div>
div {
width:500px;
height:100px;
background-color:aqua;
text-align:center;
/* there it is */
display:table-cell;
vertical-align:middle;
}
jsfiddle.net/9Mk64/
on the p element, add 3 styling rules.
.myCenteredPElement{
margin-left: auto;
margin-right: auto;
text-align: center;
}
This solution works fine for all major browsers, except IE. So keep that in mind.
In this example, basicaly I use positioning, horizontal and vertical transform for the UI element to center it.
.container {
/* set the the position to relative */
position: relative;
width: 30rem;
height: 20rem;
background-color: #2196F3;
}
.paragh {
/* set the the position to absolute */
position: absolute;
/* set the the position of the helper container into the middle of its space */
top: 50%;
left: 50%;
font-size: 30px;
/* make sure padding and margin do not disturb the calculation of the center point */
padding: 0;
margin: 0;
/* using centers for the transform */
transform-origin: center center;
/* calling calc() function for the calculation to move left and up the element from the center point */
transform: translateX(calc((100% / 2) * (-1))) translateY(calc((100% / 2) * (-1)));
}
<div class="container">
<p class="paragh">Text</p>
</div>
I hope this help.