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

最新推荐文章于 2023-03-28 09:12:15 发布

cumi6497

最新推荐文章于 2023-03-28 09:12:15 发布

阅读量582

点赞数

文章标签： css python html java js ViewUI

原文链接：https://www.freecodecamp.org/news/how-to-center-an-image-using-text-align/

版权

本文介绍如何使用CSS的`text-align`属性在canvas中居中文本，并讲解了`object-fit`属性如何使图像在不同浏览器中水平和垂直居中。提供示例代码及浏览器兼容性信息。

摘要由CSDN通过智能技术生成

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)

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

canvas文本居中对齐

cumi6497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫