如何在引导程序 4 中将图像居中? [英] How to center the image in bootstrap 4?

问题描述

我是 Bootstrap 4 的新手，在 Bootstrap 3 的早期我们使用类center-block"，现在我无法在新版本中找到它.

解决方案

居中内联元素实际上与 Bootstrap 无关.

使用 text-align

将图像居中

图像是内联元素，可以使用 text-align 对齐.

文本将围绕图像流动，因为它是一个内联元素.

通常:

<img src="http://placehold.it/200x200";/>

Bootstrap 方式:

<img src="http://placehold.it/200x200";/>

使用 margin

将图像居中

您可以将图像的显示更改为块元素并使用边距使块居中.

由于我们将显示更改为 block，因此文本将被推入图像上方和下方.

<img src="http://placehold.it/200x200";样式=显示:块；边距:自动；"/>

Bootstrap 方式:

<img src="http://placehold.it/200x200";class =mx-auto d-block"/>

完整示例

.my-text-center {文本对齐:居中；}.my-block-center {显示:块；保证金:自动；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="样式表"/><div class="my-text-center"><img src="http://placehold.it/200x200"/>

<div class="text-center"><img src="http://placehold.it/200x200"/>

<div><img src="http://placehold.it/200x200" class="my-block-center"/>

<div><img src="http://placehold.it/200x200" class="mx-auto d-block"/>

I am new to Bootstrap 4, earlier in Bootstrap 3 we use class "center-block", now I am not able to find this in new version.

解决方案

Center an inline element has nothing to do with Bootstrap actually.

Center the image using text-align

An image is an inline element and can be aligned using text-align.

Text will flow around the image, since it is an inline element.

Normally:

<div style="text-align: center;">
    <img src="http://placehold.it/200x200" />
</div>

The Bootstrap way:

<div class="text-center">
    <img src="http://placehold.it/200x200" />
</div>

Center the image using margin

You can change the display of the image to a block element and use margin to center the block.

Text will be pushed above and under the image since we change the display to block.

<div>
    <img src="http://placehold.it/200x200" style="display: block;margin: auto;" />
</div>

The Bootstrap way:

<div>
    <img src="http://placehold.it/200x200" class="mx-auto d-block" />
</div>

Full example

.my-text-center {
  text-align: center;
}

.my-block-center {
  display: block;
  margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="my-text-center">
  <img src="http://placehold.it/200x200" />
</div>

<div class="text-center">
  <img src="http://placehold.it/200x200" />
</div>

<div>
  <img src="http://placehold.it/200x200" class="my-block-center" />
</div>

<div>
  <img src="http://placehold.it/200x200" class="mx-auto d-block" />
</div>

这篇关于如何在引导程序 4 中将图像居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！