центра выравнивание дивы по вертикали и по горизонтали

я следующий кодомцентра выравнивание дивы по вертикали и по горизонтали

<div id="main"> 
    <div id="one"> </div> 
    <div id="two"> </div> 
    <div id="three"> </div> 
    <div id="four"> </div> 
</div>

мне нужно, чтобы выровнять средний 4 DIV, как показано ниже, сохраняя равное пространство на каждой стороне (сверху пространства = нижнего пространство и правое пространство = левый пробел):

______________________________________ 
|         | 
|   ________ ________   | 
|  |  ||  |  | 
|  | one || two |  | 
|  |  ||  |  | 
|  |________||________|  | 
|   ________ ________   | 
|  |  ||  |  | 
|  | three || four |  | 
|  |  ||  |  | 
|  |________||________|  | 
|         | 
|____________________________________|

Четыре DIV одинаково разнесенных, пожалуйста, может кто-нибудь мне помочь мне здесь с любым CSS сниппет? Также я вижу много вопросов по этому поводу, но не могу понять это. Может ли кто-нибудь указать мне любую полезную ссылку, которая прекрасно объясняет все концепции, связанные с выравниванием div?

(Folks, я знаю, что это будет дублировать, но, пожалуйста, помогите, как я только собираюсь волчком прибегая к помощи.)

Заранее спасибо :)

источник

2012-06-18 mtk

Вот один из способов, который работает во всех современные браузеры, включая IE8: jsFiddle example.

HTML

<div id="main"> 
    <div id="one"></div> 
    <div id="two"></div><br /> 
    <div id="three"></div> 
    <div id="four"></div> 
</div>

CSS

div { 
    border:1px solid #999; 
} 
#main { 
    width:400px; 
    height:400px; 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
} 
#one,#two,#three,#four{ 
    width:100px; 
    height:100px; 
    display:inline-block;  
}

Обратите внимание, что я действительно должен был добавить один перерыв тег (<br />) для кода.

источник

2012-06-18 20:27:04 j08691

это не отображает центр в любом браузере я тестируемой: Safari, Chrome, FireFox или iPhone. он выравнивается в верхнем левом углу. @mtk, это не ваше решение –

@ j08691 Рассматривается ли 'IE8' как современный браузер? – starbeamrainbowlabs

@ j08691 Имеет хороший пример. Но вот мое ли это никакой пользы ...

<html> 
<body> 

<div style="width: 960px; margin: 0 auto;"> 

    <div> 
     <div style="width: 480px; float: left;"> 
      <div style="padding: 10px; border: 1px solid #F00;"> 
       1 
      </div> 
     </div> 
     <div style="width: 480px; float: left;"> 
      <div style="padding: 10px; border: 1px solid #F00;"> 
       2 
      </div> 
     </div> 
    </div> 

    <div> 
     <div style="width: 480px; float: left;"> 
      <div style="padding: 10px; border: 1px solid #F00;"> 
       3 
      </div> 
     </div> 
     <div style="width: 480px; float: left;"> 
      <div style="padding: 10px; border: 1px solid #F00;"> 
       4 
      </div> 
     <div> 
    </div> 

</div> 

</body> 
</html>

источник

2012-06-18 20:31:02 Theo

Я пошел немного другой ответ (но @ j08691 имеет хорошее решение),

#main{ 
    position:absolute; 
    top:50%; 
    left:50%; 

    width:100px; 
    height:100px; 
    margin:auto; 
} 

#one, #two, #three, four{ 
    float:left; 
    width:50px; 
    height:50px; 
}

полный рабочий код, который я тестировал на был,

<html> 
<head> 

<style media="screen" type="text/css"> 

#main{ 
    position:absolute; 
    top:50%; 
    left:50%; 

    width:100px; 
    height:100px; 
    margin:auto; 
} 

#one, #two, #three, four{ 
    float:left; 
    width:50px; 
    height:50px; 
} 

.box{ 
    float:left; 
    width:50px; 
    height:50px; 
} 


#one{ 
    background-color:#f00; 
} 
#two{ 
    background-color:#0f0; 
} 
#three{ 
    background-color:#00f; 
} 
#four{ 
    background-color:#000; 
} 


</style> 
</head> 
<body> 
<div id="main"> 
    <div id="one" class="box"> </div> 
    <div id="two" class="box"> </div> 
    <div id="three" class="box"> </div> 
    <div id="four"class="box" > </div> 
</div> 
</body> 
</html>

источник

2012-06-18 20:32:18

Центрирование по горизонтали легкая часть, но есть ловкий трюк, чтобы получить вещи, выровненные по вертикали, используя абсолютное позиционирование и отрицательные поля. Here's a working example I wrote a few years back.

Вот код и объяснение:

<div id="main"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
    <div id="four"></div>  
</div>

CSS

#main { 
    position: absolute; 
    top: 50%; /* gets the first pixel in the center of the browser */ 
    left: 50%; 
    height: 860px; 
    width: 860px; 
    margin-top: -430px; /* negative margin half the height of the div to make it appear center */ 
    margin-left: -430px; 
    border: solid 1px #000; 
    overflow: visible; /* allows an absolutely positioned element to contain floats */ 
    } 
#one, #two, #three, #four { 
    float: left; 
    height: 400px; 
    width: 400px; 
    background-color: blue; 
    margin: 20px; 
    } 
#one, #three { 
    margin-right: 0; 
    } 
#one, #two { 
    margin-top: 20px; 
    margin-bottom: 0; 
    }

источник

2012-06-18 21:41:04

центра выравнивание дивы по вертикали и по горизонтали

ответ

Смежные вопросы