Text alignment in html and css-lin Qiqi

Text alignment in html & amp; css-we often encounter many text alignment problems during the use of Lin Qiqi html & css. Next I want to introduce a text alignment problem that is difficult to use.

Shows the implementation effect.

To center the two lines horizontally and align them horizontally, the two lines are left aligned, as shown in.

It sounds quite simple, but it is implemented ......

Method 1:

Use a large block of p to wrap two p S, set "text-align: center;" in the large p, and set "text-align: left;" in the Small p ;"

Shows the result.

Because p occupies a whole row, and cannot automatically adjust the width with the content size, it is difficult to control if you want to set width for the large p, because in case the length of the text segment changes, the center still cannot be implemented.

Incorrect practice 2:

So I changed the Small p to span, because span is a line element and can adjust its own width with the width of the text segment in the span. Shows the result.

Because span automatically adjusts its own width (that is, the span width is equal to the text segment length), "text-align: left;" does not work for it.

Correct practice:

Since neither the block-level element nor the Row Element can achieve this effect, can it compromise between the elements between them.

Yes, that is, set "display: inline-block ;".

As follows:

Idea: place a small p in a large p, and the Small p contains two span segments. Big p sets "text-align: center;" to center Small p; Small p sets "display: inline-block;", so that small p can have the characteristics of intra-row elements, the width is automatically adjusted based on the content, and "text-align: left;" is set to align the elements left.

Tip: The span element in Small p can be replaced with block-level elements such as p, and the Small p can be replaced with intra-row elements such as span.

The html code is as follows:

    
        Please make payment as soon as possible to ensure that sellers can provide services in a timely manner
        Unpaid orders will be closed in half an hour    

Html code

The css code is as follows:

1*{2 margin: 0; 3 padding: 0; 4} 5 # container {6 text-align: center; 7 background-color: # DBEDFD; // these three sentences are for the sake of appearance. Ignore them... 8 height: 40px; 9 padding: 15px 0; 10} 11 # child-container {12 text-align: left; 13 display: inline-block; 14}

CSS code