CSS實現讓多個Div排列居中的方法,我覺得這個布局挺實用,不管大小網站似乎都要用到,平時覺得再普通不過了,不過自己動手設計的時候,或許會眼高手低了,今天這個CSS居中排列實例,希望可以幫到您。
01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
02
<
Html
XMLns
=
"http://www.w3.org/1999/xHtml"
>
03
head
04
title
>CSS多個Div排列居中的方法</
05
style
type
"text/CSS"
06
body {text-align:center}
07
#outer {
08
width:60%;
09
background:#ffffcc;
10
margin:auto;
11
text-align:center;
12
}
13
.inner {
14
width:100px;
15
height:100px;
16
margin:5px;
17
border:1px solid #000;
18
19
* Html .inner {display:inline}/* for IE*/
20
Html>body #outer {display:table}/*for mozilla */
21
Html>body .inner {display:table;float:left}/*for mozilla */
22
@media all and (min-width: 0px){/* Opera 7 styles */
23
Html>body .inner {display:inline-block;float:none;}
24
25
</
26
27
body
28
<!-- force quirks mode by using the XML pro-logue -->
29
div
id
"outer"
30
class
"inner"
>test</
31
>2</
32
>3</
33
>4</
34
>5</
35
>6</
36
>7</
37
>8</
38
>9</
39
br
"clear:both"
/>
40
41
42