Introduction to the method of using fit-content to achieve horizontal centering in CSS3

巴扎黑
Release: 2017-09-09 14:32:18
Original
1716 people have browsed it

Today I will introduce you to the relevant knowledge of the fit-content attribute through this article. The CSS attribute is used for horizontal centering. Fit-content is a new attribute value added to the width attribute in CSS3. It can be used together with margin to make it easy for us. To achieve the effect of horizontal centering; let’s take a look at the code

When we let a module be horizontally centered, the first thing that comes to mind must be margin:0 auto; Is there any? So today I will introduce to you a fit-content attribute. I wonder if any students have used it. If so, you can skip this article. Those who have not used it can continue. This is the first time I have seen this attribute. I didn’t know about this attribute before, let alone use it. It turns out that this CSS attribute is used for horizontal centering. Fit-content is a newly added attribute value for the width attribute in CSS3. It works with margin to allow us to easily achieve horizontal centering. Effect; let’s take a look at the code.

If the width is not set and the element contains float:left, let’s look at a piece of code:

##So this navigation will not be centered when we set fit-content plus margin to achieve centering.

Currently this attribute only supports Chrome and Firefox browsers. The following is the centered code:

The above is the detailed content of Introduction to the method of using fit-content to achieve horizontal centering in CSS3. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!