Css centre align images with

How to center image horizontally within a div element?

How can I center align (horizontally) an image inside its container div? Here’s the HTML and CSS. I have also included the CSS for the other elements of the thumbnail. It runs in descending order so the highest element is the container of everything and the lowest is inside everything.

#thumbnailwrapper < color: #2A2A2A; margin-right: 5px; border-radius: 0.2em; margin-bottom: 5px; background-color: #E9F7FE; padding: 5px; border: thin solid #DADADA; font-size: 15px >#artiststhumbnail < width: 120px; height: 108px; overflow: hidden; border: thin solid #DADADA; background-color: white; >#artiststhumbnail:hover

Okay, I have added the markup without the PHP in so should be easier to see. Neither solution seems to work in practice. The text at top and bottom cannot be centered and the image should be centered within its container div. The container has overflow hidden so I want to see the center of the image as that’s normally where the focus is.

Jacob, can you at least post the actual markup the browser sees and not the PHP-infused template? Also, a functioning jsfiddle.net always helps.

24 Answers 24

I don’t think this is a good idea, and also I believe there’s some caveats like margin: auto is dependent on the containing element having a designated width value.

I’m still improving my CSS skills, so thanks for the interesting study point. But in this case, he is using a fixed width on the container.

What exactly does designated width mean in this context? Definitely seems like useful knowledge to have.

See this fiddle I made; I’m not sure what to think. What you’re suggesting won’t do anything, and the img I believe would need a width defined anyways to have any effect with auto .

You didn’t actually implement the solution I presented. Second, the enclosing div has a width of 120px, which is about the same as the width of the image, making it hard to see if it’s actually centering the image. Here’s my solution: jsfiddle.net/marvo/3k3CC/2

CSS flexbox can do it with justify-content: center on the image parent element. To preserve the aspect ratio of the image, add align-self: flex-start; to it.

body < background: lightgray; >.image-container < width: 200px; display: flex; justify-content: center; margin: 10px; padding: 10px; /* Material design properties */ background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); >.image-2 < width: 500px; align-self: flex-start; /* to preserve image aspect ratio */ >.image-3 < width: 300px; align-self: flex-start; /* to preserve image aspect ratio */ >

Excellent solution when the browser support this, which mine does. Can also use align-items to center vertically. The various margin solutions don’t work for me because the element to be centered doesn’t have width and height attributes.

I just found this solution below on the W3 CSS page and it answered my problem.

I’m using max-width: 100%; max-height: 100%; to resize the image if the screen smaller than image, but in this case it’s not centered. Any suggestions on how to center with those two attributes applied

#imagewrapper < text-align:center; >#imagewrapper img

@TylerH Thats true, semicolons are not required for the last property in a selector block but it’s always saver to use the semicolons.. What if I write a CSS file, another developer edits my file later, they add some code (after the line with the missing semicolon, the line I wrote before in that CSS file) and their height, width or other declaration isn’t working (or worse yet, they doesn’t notice that it’s not working). I would say It’s safer to leave the semicolons in. This is why I use the semicolons and never leave the semicolons out.

@jagb If another developer edits your file later, they will add in semicolons where necessary, or it will be their problem for writing code that has errors. The response to your initial comment is still: «semicolons on the last line in CSS are a style choice».

I agree with jagb. This site should promote good style choices. A good style does not leave code behind that is easily broken. Putting the semicolon on every line costs you maybe 1/10th of a second, debugging to find a single missing semicolon can cost you hours. Thats why the big tech companies insist on it: Google HTML/CSS Style Guide — Declaration Stops

The best thing I have found (that seems to work in all browsers) for centering an image, or any element, horizontally is to create a CSS class and include the following parameters:

You can then apply the CSS class you created to your tag as follows:

You can also inline the CSS in your element(s) by doing the following:

. but I wouldn’t recommend writing CSS inline because then you have to make multiple changes in all your tags using your centering CSS code if you ever want to change the style.

I also found this link to be helpful. It shows a similar transform: translate(-50%) trick you show here, but uses it in conjunction with margin-left: 50% , rather than left:50% . It also contrasts solutions for when the item has` relative` vs absolute positioning. This is mostly for my future reference, so I can refer here to your Answer, and a solution I previously used, in 1 (upvoted) location. 🙂 css-tricks.com/centering-css-complete-guide

Oh, here’s another tidbit I found regarding positioning on the element & container [at w3.org] (w3.org/Style/Examples/007/center.en.html) for using the transform: translate trick: Essential rules are: 1) Make the container relative ly positioned, which declares it to be a container for absolutely positioned elements. 2) Make the element itself absolute ly positioned. 3) Place it halfway down the container with ‘top: 50%’ (or horizontally with left:50% ). 4) Use a translation to move the element up by half its own height (or horizontally by half its width).

Источник

How to Center an Image Vertically and Horizontally with CSS

Cem Eygi

Many developers struggle while working with images. Handling responsiveness and alignment is particularly tough, especially centering an image in the middle of the page.

So in this post, I will be showing some of the most common ways to center an image both vertically and horizontally using different CSS properties.

Here’s an interactive scrim about how to center an image vertically and horizontally:

I’ve gone over the CSS Position and Display properties in my previous post. If you’re not familiar with those properties, I recommend checking out those posts before reading this article.

Here’s a video version if you want to check it out:

Centering an Image Horizontally

Let’s begin with centering an image horizontally by using 3 different CSS properties.

Text-Align

The first way to center an image horizontally is using the text-align property. However, this method only works if the image is inside a block-level container such as a :

Margin: Auto

Another way to center an image is by using the margin: auto property (for left-margin and right-margin).

However, using margin: auto alone will not work for images. If you need to use margin: auto , there are 2 additional properties you must use as well.

The margin-auto property does not have any effects on inline-level elements. Since the tag is an inline element, we need to convert it to a block-level element first:

Secondly, we also need to define a width. So the left and right margins can take the rest of the empty space and auto-align themselves, which does the trick (unless we give it a width of 100%):

Display: Flex

The third way to center an image horizontally is by using display: flex . Just like we used the text-align property for a container, we use display: flex for a container as well.

However, using display: flex alone will not be enough. The container must also have an additional property called justify-content :

The justify-content property works together with display: flex , which we can use to center the image horizontally.

Finally, the width of the image must be smaller than the width of the container, otherwise, it takes 100% of the space and then we can’t center it.

Important: The display: flex property is not supported in older versions of browsers. See here for more details.

Centering an Image Vertically

Display: Flex

For vertical alignment, using display: flex is again really helpful.

Consider a case where our container has a height of 800px, but the height of the image is only 500px:

Now, in this case, adding a single line of code to the container, align-items: center , does the trick:

The align-items property can position elements vertically if used together with display: flex .

Position: Absolute & Transform Properties

Another method for vertical alignment is by using the position and transform properties together. This one is a bit complicated, so let’s do it step by step.

Step 1: Define Position Absolute

Firstly, we change the positioning behavior of the image from static to absolute :

Also, it should be inside a relatively positioned container, so we add position: relative to its container div.

Step 2: Define Top & Left Properties

Secondly, we define the top and left properties for the image, and set them to 50%. This will move the starting point(top-left) of the image to the center of the container:

Step 3: Define the Transform Property

But the second step has moved the image partially outside of its container. So we need to bring it back inside.

Defining a transform property and adding -50% to its X and Y axis does the trick:

There are other ways to center things horizontally and vertically, but I’ve explained the most common ones. I hope this post helped you understand how to align your images in the center of the page.

If you want to learn more about Web Development, feel free to visit my Youtube Channel for more.

Источник

How can I center and left align images?

I am working on an image gallery and want have the image’s container be completely centered on the page, but the images are left aligned. This is my desired output: However, when I try to do a text-align: center on the container(id: gallery ) I am getting the images displayed like this: I tried following suit with a previous stack overflow question: CSS: Center block, but align contents to the left and wrap the images in another div then align it with display: inline-block; and text-align: left; but the images just seem to align left on the entire page: What can I do to accomplish my desired output? HTML

#gallery < text-align: center; >#images < display: inline-block; text-align: left; >img < width: 300px; cursor: pointer; >.overlay < position: absolute; right: 0; left: 0; cursor: pointer; visibility: hidden; color: transparent; top: 0; bottom: 0; width: 100%; height: 100%; transition: all ease-in .3s; >.overlay > img < height: 50%; width: 50%; top: 50%; visibility: hidden; left: 50%; transform: translate(-50%,-50%); position: absolute; >.overlay:hover > img < visibility: visible; >.container < position: relative; display: inline-block; margin: 5px; >.container:hover .overlay

Источник