跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多。
OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕。
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕或安装APP。
  3. 轻敲安装进行确认。
  • 选择语言

CSS Centering Images

Cavalry
在 教程

推荐的帖子

  • 行政经理

CSS Centering Images

Centering Images

With CSS, you can center images with several methods.

An image can be centered horizontally, vertically, or both.

Center an Image Horizontally

To display a horizontally centered image, we can use margin: auto; or display: flex;.

1. Using margin: auto

One way to center an image horizontally on a page is to use margin: auto.

Since the <img> element is an inline element by default (and margin: auto does not have any effect on inline elements) we must convert the image to a block element, with display: block.

In addition, we have to define a width. The width of the image must be smaller than the width of the page.

Here is a horizontally centered image using margin: auto:

Paris

Example

Horizontally centered image using margin: auto:

img {
  display: block;
  margin: auto;
  width: 50%;
}
Try it Yourself »

2. Using display: flex

Another way to center an image horizontally on a page is to use display: flex.

Here, we put the <img> element inside a <div> container.

We add the following CSS to the div container:

  • display: flex
  • justify-content: center (centers the image horizontally in the div container)

Then, we set a width for the image. The width of the image must be smaller than the width of the page.

Here is a horizontally centered image using display: flex:

Paris

Example

Horizontally centered image using display: flex:

div {
  display: flex;
  justify-content: center;
}

img {
  width: 50%;
}
Try it Yourself »

Vertical and Horizontal Centering

To display an image that is both vertically and horizontally centered (true centering), we can use display: flex; or display: grid;.

1. Using display: flex

To display an image that is both vertically and horizontally centered with flexbox, we use a combination of: 

  • display: flex;
  • justify-content: center; (centers the image horizontally in the container)
  • align-items: center; (centers the image vertically in the container)
  • height: 600px; (the height of the container)

Here, we also put the <img> element inside a <div> container.

Then, we set a width for the image (must be smaller than the width of the container).

Here is a vertically and horizontally centered image with flexbox:

Paris

Example

True centering using display: flex:

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  border: 1px solid black;
}

img {
  width: 50%;
}
Try it Yourself »

2. Using display: grid

To display an image that is both vertically and horizontally centered with grid, we use a combination of: 

  • display: grid;
  • place-items: center; (centers the image horizontally and vertically in the container)
  • height: 600px; (the height of the container)

Here, we also put the <img> element inside a <div> container.

Then, we set a width for the image (must be smaller than the width of the container).

Here is a vertically and horizontally centered image with grid:

Paris

Example

True centering using display: grid:

div {
 display: grid;
  place-items: center;
  height: 600px;
  border: 1px solid black;
}

img {
  width: 50%;
}
Try it Yourself »

  • 引用

    • 参与讨论

    你可立刻发布并稍后注册。 如果你有帐户，立刻登录发布帖子。

    游客
    回帖…
    转到主题列表

    帐户

    导航

    搜索

    搜索

    配置浏览器推送通知
    Chrome (安卓)
    1. 轻敲地址栏旁的锁形图标。
    2. 轻敲权限 → 通知。
    3. 调整你的偏好。
    Chrome (台式电脑)
    1. 点击地址栏中的挂锁图标。
    2. 选择网站设置。
    3. 找到通知选项并调整你的偏好。