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

Today, I would like to share with you the relevant knowledge points about how to achieve the vertical center of words and pictures in html. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Method 1: setting the height of the box is the same as line-height, this method is suitable for one line of text.

The vertical center of the picture and the alignment of one line of text use the attribute vertical-align

The small icon is vertically aligned with the text, and the small icon is inserted as the background

/ / attr: set the properties generated by yourself, such as selectedchecked, even if you click with the mouse, its value is undefinded, so prop is recommended for its own attributes.

Include blocks (ContainingBlock)

The calculation of the size and position of an element is often determined by the inclusion block in which the element is located. The inclusion block does not refer to a specific area of the element, but a visually imaginary area. With the understanding of it, it is convenient to locate the element.

So how do you know where the containing block of an element is?

Initial inclusion block

A user agent, such as a browser, selects the root element as the containingblock (called the initial containingblock). When there is no other inclusion block close to the child element of html, it will rely on the initial inclusion block for positioning,

What is the size of the initial containing block? That is, the viewport size, the height does not increase as the html increases.

A non-absolutely positioned element that contains a block consisting of the content boundary of the nearest block-level ancestor element box.

The same is true for floating elements, starting with content boundaries.

The inclusion block of an absolute element is established by the ancestor of the nearest position, not static.

In fact, this is more complex, and you need to consider whether the inclusion block of the absolute element is created inline or at the block level. Inline compatibility is poor, so it is generally avoided to include block-level elements in inline elements, so most of them are created by block-level elements.

Its containingblock is formed by the inner boundary of the border of the ancestors.

If the element has attributes, 'position:fixed',containingblock is established by the viewport

Css picture center is divided into two cases: CSS picture horizontal center and vertical center, sometimes the picture needs to be centered horizontally and vertically at the same time.

The following are introduced in several different situations:

Css picture horizontal center

1. Using margin:0auto to realize the horizontal center of pictures

Using margin:0auto to center a picture is to add a css style margin:0auto to the image as follows:

two。 Using the horizontal center attribute text-align:center of the text

The code is as follows:

Css picture is vertically centered

1. Using the height = = line height to realize the vertical center of the picture

This method can only be used by indicating the height. The code is as follows:

two。 Using table to realize the Vertical Center of Pictures

The way to take advantage of table is to take advantage of the vertical center attribute of table. The code is as follows:

Here display:table; and display:table-cell; are used to simulate table. This method is not compatible with IE6/IE7,IE67 and does not support display:table. If you do not need to support IE67, you can use it.

Disadvantages: when you set up display:table;, it may change your original layout.

3. Using absolute positioning to realize the vertical center of the picture

If the width and height of the picture are known to be like this, the code is as follows:

4. The mobile end can use flex layout to achieve vertical centering of css pictures.

Generally speaking, the browser version of the mobile device is relatively high, so you can boldly use flex layout. (the flex layout refers to the flex layout usage of css3) the demonstration code is as follows:

Css Code:

. ui-flex {

DisplayPlux, Musi, webkit, and boxboxes.

DisplayRose, webkit, flexure.

DisplayPlayRose Flexboxboxes

Display:flex!important

-webkit-flex-wrap:wrap

-ms-flex-wrap:wrap

Flex-wrap:wrap

}

. ui-flex,.ui-flex*,.ui-flex:after,.ui-flex:before {

Box-sizing:border-box

}

.UI-flex.justify-center {

-webkit-box-pack:center

-webkit-justify-content:center

-ms-flex-pack:center

Justify-content:center

}

. ui-flex.center {

-webkit-box-pack:center

-webkit-justify-content:center

-ms-flex-pack:center

Justify-content:center

-webkit-box-align:center

-webkit-align-items:center

-ms-flex-align:center

Align-items:center

}

Html Code:

These are all the contents of the article "how to achieve the vertical center of text and pictures in html". 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.