Home > Developer > JavaScript
CSS style setting tips and css style tips
In-Row Element center setting: If the set element is a text, image, or other in-Row ElementParent ElementSettext-align:center. The sample code is as follows:
HTML code <body> <div class = "txtCenter"> I WANT TO horizontally center the display in the parent container. </Div> </body> CSS Code <style>. txtCenter {text-align: center;} </style>
Centered setting of fixed width block elements: the elements that meet the conditions of fixed width and block can be centered by setting the "Left and right margin" value to "auto. The sample code is as follows:
HTML code <body> <div> I am a fixed-width block element. Haha, I want to display horizontally in the center. </Div> </body> CSS Code <style> div {border: 1px solid red;/* set a border for the div to display the center effect. */width: 200px; /* fixed width */margin: 20px auto;/* Set margin-left and margin-right to auto */} </style>
Center setting of undefined block elements:
HTML code <div> <table> <tbody> <tr> <td> <ul> <li> I am the first line of text </li> <li> I am the second line text </li> <li> I am the third line of text </li> </ul> </td> </tr> </tbody> </table> </div> CSS Code <style> table {border: 1px solid; margin: 0 auto ;}</style>
2. Set the display: inline method: Change the display of block-level elements to the inline type (set to the display of in-line elements), and then usetext-align:centerTo achieve the center effect. The Code is as follows:
HTML code <body> <div class = "container"> <ul> <li> <a href = "#"> 1 </a> </li> <a href = "#"> 2 </a> </li> <a href = "#"> 3 </a> </li> </ul> </div> </body> CSS Code <style>. container {text-align: center;}/* margin: 0; padding: 0 (eliminating the gap between the text and the div border )*/. container ul {list-style: none; margin: 0; padding: 0; display: inline;}/* margin-right: 8px (set the interval between li texts )*/. container li {margin-right: 8px; display: inline ;}</style>
3. set position: relative and left: 50%: Set float for the parent element, set position: relative and left: 50% for the parent element, and set position: relative and left: -50% to achieve horizontal center. The Code is as follows:
HTML code <body> <div class = "container"> <ul> <li> <a href = "#"> 1 </a> </li> <a href = "#"> 2 </a> </li> <a href = "#"> 3 </a> </li> </ul> </div> </body> CSS Code <style>. container {float: left; position: relative; left: 50% }. container ul {list-style: none; margin: 0; padding: 0; position: relative; left:-50% ;}. container li {float: left; display: inline; margin-right: 8px ;}</style>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
