Text alignment in html & amp; css, html5

Text alignment in html & css, html5
During the use of html and css, we often encounter many text alignment problems. 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:Wrap two divs with a large div and set "text-align: center;" in the large div. Set "text-align: left;" in the small div. The result is shown in. Because div occupies a whole row, and the width cannot be adjusted automatically with the content size. If you want to set width for a large div, this is not easy to control, because in case the length of the text segment changes, the center still cannot be implemented.Incorrect practice 2:So I changed the small div to span, because span is an element in the row 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 ;". The idea is as follows: place a small div in a large div, which contains two span sections. Set "text-align: center;" for the big div to center the small div; Set "display: inline-block;" for the small div to have the characteristics of the row element, 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 a small div can be replaced with block-level elements such as div, and the small div can be replaced with intra-row elements such as span. The html code is as follows: <div id = "container"> <div id = "child-container"> <span class = "text"> Please pay as soon as possible to ensure that sellers can provide services in a timely manner </span> <br/> <span class = "text"> unpaid orders will be closed in half an hour </span> </div>The html code 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