How to Center an Image Using Text Align: Center | 您所在的位置:网站首页 › images/center.jpg › How to Center an Image Using Text Align: Center |
An 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. To center an image using text-align: center; you must place the 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 . Example Center an Image using text align center .img-container { text-align: center; }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. Center an Image using text align center .img-container { text-align: center; display: block; }Demo: Codepen Object FitOnce 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. 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. Basically we use the object-fit property to define how it stretch or squish an inline media. Syntax.element { object-fit: fill || contain || cover || none || scale-down; }Valuesfill: This is the default value. Resize the content to match its parent box regardless of the aspect-ratio.contain: Resize the content to fill its parent box using the correct aspect-ratio.cover: similar as contain but often cropping the content.none: display the image in its original size.scale-down: compare the difference between none and contain to find the smallest concrete object size.Browser CompatibilityThe 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. Documentationtext-align - MDNobject-fit - MDN - MDN |
CopyRight 2018-2019 实验室设备网 版权所有 |