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 ascontain
but often cropping the content.cover
:与contain
类似,但经常裁剪内容。none
: display the image in its original size.none
:以原始尺寸显示图像。scale-down
: compare the difference betweennone
andcontain
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)
翻译自: https://www.freecodecamp.org/news/how-to-center-an-image-using-text-align/
canvas文本居中对齐