как i центр div элементов горизонтально в css?

Question

Как я могу центрировать элементы div горизонтально, поэтому, когда я изменяю ширину браузера, последний div спускается с помощью css?

Итак:

---||||-||||-||||--- 

--------||||-------- 

Когда я пишу:

<div style="float: left; position: relative; left: 50%;"> 
    <div style="float: left; position: relative; left: -50%;"> 
    <div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div> 
    <div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div> 
    ... 
    </div> 
</div> 

Затем после элемента идут вниз, все элементы DIV перейти на левую сторону.

Answer 1

Я бы рекомендовал использовать display: inline-block на элементы, а затем с помощью text-align: center на контейнере для обработки центрирующее вы хотите:

Я очистил свой HTML, но здесь основной HTML форматирования с container класса и нескольких (как многие, как вы хотите) block класса DIVs:

<div class="container"> 
    <div class="block">Text</div> 
    <div class="block">Text</div> 
    <div class="block">Text</div> 
</div> 

CSS-изменяет параметры отображения блоков и выравнивание текста в контейнере:

div.block { 
    display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */ 
    width: 315px; 
    margin: 10px 0; 
    height: 340px; 
} 
div.container { 
    width: 100%; 
    text-align: center; /* this is the magic that centers the elements */ 
} 

я собрал небольшую демонстрацию, которая должна помочь продемонстрировать этот метод: JSFIDDLE


Имейте в виду: небольшой «причуда» существует с display: inline-block CSS. это приводит к небольшому пространству между элементами. Это можно удалить несколькими способами, мои предпочтительные методы - либо использование комментариев, либо завершение закрывающих тегов DIV. (Проблема вызвана возвращением/пробелы между элементами в HTML):

<div class="container"> 
    <div class="block">Text</div><!-- 
    --><div class="block">Text</div><!-- 
    --><div class="block">Text</div> 
</div> 

<div class="container"> 
    <div class="block">Text</div 
    ><div class="block">Text</div 
    ><div class="block">Text</div> 
</div> 

reference for the quirk behavior

Answer 2

Создайте контейнер <div>, который составляет 100% от заданной области. Затем установите каждую ширину <div> внутри контейнера как% и float: left;. Они будут складываться рядом друг с другом, пока они не подойдут и перейдут на следующую строку.

.container { 
 
    width: 100%; 
 
} 
 
.three { 
 
    width: 33%; 
 
    min-width: 225px; 
 
    float: left; 
 
    border: 1px solid black; 
 
}

<div class="container"> 
 
    
 
    <div class="three"> 
 
    <p>Something</p> 
 
    </div> 
 
    
 
    <div class="three"> 
 
    <p>Something</p> 
 
    </div> 
 
    
 
    <div class="three"> 
 
    <p>Something</p> 
 
    </div> 
 
    
 
</div>

Выполните фрагмент кода.

Answer 3

Вы можете использовать медиа-запросы писать разный код CSS для разных размеров:

Media Queries