Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how to achieve CSS content center and vertical center of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

I. CSS content is in the middle.

Content horizontal center CSS attribute code: text-align:center

As long as you need to center the level of the object setting equipment text-align:center can complete the center. But usually CSS needs to initialize CSS before reclaiming land and then configure the text-align:center content center pattern.

Css sets the equipment content to be centered (degree centered) code example:

. t-center {text-align:center}

Corresponding content of HTML:

Content in the middle

Screenshot of css centered example

The content is in the middle and the equipment is set up with screenshots.

Second, the content is vertically centered

Vertical center, mostly in the object of a row of calligraphy vertical center, using the CSS attribute style line high trick line-height to complete.

Heavy if the height of the object, the line-height line height value will set how high the equipment is, and the content can be centered vertically.

Css content is centered vertically. Example CSS code:

.exp {border:1px solid # F00; height:80px; line-height:80px}

To catch a glimpse of the vertical centering effect, set the rig border on the instance object.

Html Code:

The content is centered vertically in the 80px height object

Screenshot:

Css Vertical Center setting instance

III. Css layout is centered (degree)

The layout is centered against the organization of critical DIV CSS pages. Because there is not a dedicated attribute to define the agency in the middle. As usual, margin:0 auto is used to achieve organizational centralization.

Need to pay attention, in order to be compatible with the need to set text-align:center content center on body, need to organize the center of the box object configuration margin:0 auto can achieve organ center, at the same time can not set equipment float tricks like (float:left and float:right can not set equipment).

Css Organization Center instance CSS Code

Body {text-align:center} .ct {border:1px solid # F00; width:300px; margin:0 auto}

Also in order to see the effectiveness of the agency level in the middle, the instance object is configured with a border.

HTML code

The above center level of this DIV construction is all the content of the article "how does CSS achieve content center and vertical center". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.