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

This article will explain in detail about html web page pictures and text horizontal center vertical center display example analysis, Xiaobian think quite practical, so share to you as a reference, I hope you can read this article after harvest.

div Display centered horizontally relative to the page:

Core code: margin: 0 auto;

/Meaning:div's outer margin is 0px up and down, left and right center display;//provided that position is relative positioning; cannot be absolute absolute positioning/** Absolute positioning: ** is out of the document flow, so margin is invalid; it is a virtual body; any element can pass through it ** Relative positioning: ** is offset by a certain distance and retains the shape of the unpositioned tag, and the space it originally occupied is still retained. margin is valid; it is an entity;

Text centered horizontally (centered relative to simple text):

Core code: text-align: center;

Usage:

1. Write css code directly in div: text-align: center;2. Write text-align: center in div child text tag;

Explanation:

/means: text alignment is: center;

The premise is that a div is wrapped, and the reference object is div/

Text displayed vertically centered:

Core code: line-height:30px;

Usage:

div: height:30px; text in div: line-height: 30px;

Explanation:

/means: offline height is 30px;/

/There are two premises:

1The page itself has margin(outside margin) and padding(inside margin): therefore, both should be set to 0px;2 and their parent (or div) height should be set consistent;/

Text centered horizontally (centered relative to multiple text floating in the navigation bar):

Applicable: navigation bar floating after the text for a number of and there are spaces between the method;

Usage:

div: width: 150px; text in div: padding-left:22.5px;margin-left: 22.5px;font-size: 30px;

Explanation:

div parent sets width; child in div sets its padding and margin to one-quarter of parent width; premise font sets width, parent width minus each font size, divided by one-quarter

Vertical centering of images and text

Set css to center text and images vertically when they are aligned img{ vertical-align:middle;}

Thinking expansion:

The text-align: center; attribute specifies the horizontal alignment of text in an element. Set horizontal alignment of text within block-level elements Adjust spacing between letters and words in line content text-align: justify Align text at both ends. align-items: center; /vertically centered/justify-content: center; /horizontally centered/cssdiv, text, picture centered *{margin:0px;padding:0px;}.div_one{ position: relative; border:1px solid red; width:1000px; height:100px; margin:0 auto; /* Meaning:div's outer margin is 0px, left and right center display;*/ /* provided position is relative; cannot be absolute */ /*text-align: center;*/}.div_one p{font-size: 20px;text-align: center;/* means: text alignment is: center; provided that a div is wrapped, the reference object is div*/line-height: 100 px;/* means: offline height is 100 px;*/* provided that there are two:1 the page itself has margin(outside margin) and padding(inside margin): therefore, both should be set to 0px;2 and their parent (or div) height should be set consistent;*/}.div_two{top: 100px;position: relative; border:1px solid green; width:1000px; height:300px; margin:0 auto; text-align: center;}.div_two img{width:300px;height: 200px;/*align-content: center;align-items: center;*//*justify-content: center;*/transform:translateY(25%);/*vertical-align:200%;*//*line-height: 300px;*//*margin-left: 175px;padding-left: 175px;*/}

div center and font center and font vertical center

About "html web page picture and text horizontal center vertical center display example analysis" This article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

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.