canvas文本居中对齐_如何使用文本对齐来居中图像：居中

canvas文本居中对齐

An <img> element is an inline element (display value of inline-block). It can be easily centered by adding the text-align: center; CSS property to the parent element that contains it.

<img>元素是一个内联元素( inline-block显示值)。通过添加text-align: center;可以很容易地将其text-align: center; 包含它的父元素CSS属性。

To center an image using text-align: center; you must place the <img> inside of a block-level element such as a div. Since the text-align property only applies to block-level elements, you place text-align: center; on the wrapping block-level element to achieve a horizontally centered <img>.

要使用text-align: center;来居中图像text-align: center; 您必须将<img>放置在块级元素(例如div 。由于text-align属性仅适用于块级元素，因此请放置text-align: center; 在包装块级元素上实现水平居中的<img> 。

例 (Example)

<!DOCTYPE html>
<html><head><title>Center an Image using text align center</title><style>.img-container {text-align: center;}</style></head><body><div class="img-container"> <!-- Block parent element --><img src="user.png" alt="John Doe"></div></body>
</html>

Note: The parent element must be a block element. If it is not a block element, you should add display: block; CSS property along with the text-align property.

注意：父元素必须是块元素。如果不是block元素，则应添加display: block; CSS属性以及text-align属性。

<!DOCTYPE html>
<html><head><title>Center an Image using text align center</title><style>.img-container {text-align: center;display: block;}</style></head><body><span class="img-container"> <!-- Inline parent element --><img src="user.png" alt=""></span></body>
</html>

Demo: Codepen

演示： Codepen

对象拟合 (Object Fit)

Once your image is centered, you might want to resize it. The object-fit property specifies how an element responds to the width / height of it’s parent box.

图像居中后，您可能需要调整其大小。 object-fit属性指定元素如何响应其父框的宽度/高度。

This property can be used for image, video, or any other media. It can also be used with the object-position property to get more control on how the media is displayed.

此属性可用于图像，视频或任何其他媒体。它也可以与object-position属性一起使用，以更好地控制媒体的显示方式。

Basically we use the object-fit property to define how it stretch or squish an inline media.

基本上，我们使用object-fit属性来定义其如何拉伸或压缩嵌入式媒体。

句法 (Syntax)

.element {object-fit: fill || contain || cover || none || scale-down;
}

价值观 (Values)

fill: This is the default value. Resize the content to match its parent box regardless of the aspect-ratio.

fill ： 这是默认值 。调整内容的大小以匹配其父框，而不考虑纵横比。
contain: Resize the content to fill its parent box using the correct aspect-ratio.

contain ：调整内容的大小以使用正确的宽高比填充其父框。
cover: similar as contain but often cropping the content.

cover ：与contain类似，但经常裁剪内容。
none: display the image in its original size.

none ：以原始尺寸显示图像。
scale-down: compare the difference between none and contain to find the smallest concrete object size.

scale-down ：比较之间的差异none和contain找到最小的具体对象的大小。

浏览器兼容性 (Browser Compatibility)

The object-fit is supported by most of the modern browsers, for the most updated info about compatibility you can check this out http://caniuse.com/#search=object-fit.

大多数现代浏览器都支持object-fit ，有关兼容性的最新信息，请访问http://caniuse.com/#search=object-fit 。

文献资料 (Documentation)

text-align - MDN

文字对齐 -MDN
object-fit - MDN

对象拟合 -MDN
<img> - MDN

<img> -MDN

翻译自: https://www.freecodecamp.org/news/how-to-center-an-image-using-text-align/

canvas文本居中对齐