码农教程 - 一技在手,衣食无忧! tools

目录

How TO - Center Images

❮ Previous Next ❯

Learn how to center an image with CSS.

Centered image:

Paris

How To Center Images

Step 1) Add HTML:

Example

<img src="paris.jpg" alt="Paris" class="center">
Step 2) Add CSS:

To center an image, set left and right margin to auto and make it into a block element:

Example

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
Try it Yourself »

Note that it cannot be centered if the width is set to 100% (full-width).

Tip: Go to our CSS Images Tutorial to learn more about how to style images.


❮ Previous Next ❯