With regard to the horizontal center problem of CSS Control Div, I have seen many newcomers fail to see the bright moon. I remember the first time I read CSS, it was a book written by a foreigner who talked about center usage.
Margin-left: auto;
Margin-Right: auto;
Actually equivalent:
Margin: 0 auto;
This method can be used, but some people use IE to find that there is no center. We recommend that you check whether the DTD declaration is omitted.
| <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> |
Many people have made similar mistakes! This method can also be said to have been tried and tested, but in some cases it still does not work. So there is a second method.
Margin-left: 50%;
Left:-width/2;
The width here is not the width in CSS, but the width of your Div. For example, if your div is 768px width, you should set left:-384px. Well, there are two ways to solve your problems.
Sometimes you will find that these two are not good yet. Cannot be compatible with Some browsers. As a result, we found that there is a third method. In this method, we mainly consider IE, which is based on the first method. It needs to set the body.
Body {text-align: center ;}
In this way, ie is centered, but it brings about a new problem. You find that all the text on your page is centered, which is not very nice. This is easy to solve. You only need to add text-align: Left; and other adjustment settings to your Div definition.
The above text is only a post-dinner reference and sketch. You can pay attention to it in your actual work!
How to center a DIV, vertical center a DIV, and horizontal center a div.
The main style definition is as follows:
Body {text-align: center ;}
# Center {margin-Right: auto; margin-left: auto ;}
Note:
First, define text-align: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough. However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;"
It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple divs in sequence, you only need to define margin-Right: auto; margin-left: auto; in each split Div.
How to vertically center an image in a div
Use the background method. Example:
Body {Background: URL (Http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) # Fff no-repeat center ;}
The key is the final center. This parameter defines the image position. It can also be written as "top left" (upper left corner) or "bottom right", or "50 30"
The effect is as follows:
How to vertically center text in a div
If it is text, you cannot use the background method, you can use the method of increasing the line spacing to work around vertical center, completeCodeAs follows:
<HTML>
<Head>
<Style>
Body {text-align: center ;}
# Center {margin-Right: auto;
Margin-left: auto;
Height: 200px;
Background: # f00;
Width: 400px;
Vertical-align: middle;
Line-Height: 200px;
}
</Style>
</Head>
<Body>
<Div id = "center"> <p> test content </P> </div>
</Body>
</Html>
Note:
Vertical-align: middle; indicates vertical center in the row. We will increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center.
Http://www.google.cn/search? Hl = ZH-CN & Q = div + % E5 % B1 % 85% E4 % B8 % ad & meta = & AQ = 2 & OQ = div
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
