Use margin-left: auto; margin-Right: auto; to align your Div center.
. Style {margin-left: auto; margin-Right: auto ;}
Abbreviated form:
. Style {margin: 0 auto ;}
The value 0 indicates that the top and bottom margins are 0. You can set different values as needed.
View the following example:
Run codeNo coloring mode printing?
- <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns = "http://www.w3.org/1999/xhtml" lang = "ZH-CN">
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
- <Title> center Div demonstration effect </title>
- <Style type = "text/CSS">
- . Align-center {
- Margin: 0 auto;/* center. Other attributes are not required */
- Width: 500px;/* The center effect cannot be seen when the width is pushed to either side of the browser */
- Background: red;/* Background Color */
- Text-align: center;/* center text and other content */
- }
- </Style>
- </Head>
- <Body>
- <Div class = "align-center"> center Div demo </div>
- </Body>
- </Html>
Note: The above sentence must be added.
To take effect. If you do not want this sentence, you can add an attribute to the body:
Body {text-align: center ;}
In addition, the code that centers the content (including text and images) in the DIV is text-align: center;
For further explanation, see: http://topic.csdn.net/u/20100702/15/E0087252-0975-424B-8B9B-CE6C6CB3699D.html