Центр плавающего div с полем авто не работает

0

Я не уверен, что я делаю неправильно, но я просто пытаюсь сосредоточиться на этом, все еще имея возможность справляться с отзывчивостью.

Хотите, чтобы все поля были сосредоточены, но маржа: авто не работает. Вероятно, отсутствует что-то простое.

У меня есть некоторые изображения внутри цветовых div и что у части, на которой я действительно испытываю проблемы с центрированием.

Здесь jsfiddle.

http://jsfiddle.net/clam22/38L6Y/22/

HTML ниже

<div class="wrapper">
    <div class="row">
        <div id="red">
<img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        </div>
        <img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        <div id="green">
        </div>

        <div id="blue">
<img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        </div>

    </div>
</div>

Пример CSS ниже

   html,body  {
background: #FFFFFF;
font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
margin: 0 auto;
height: 100%;
width: 100%;
} 


.wrapper {
max-width: 96%;
height: 100%;
width: 90%;
}

.row {
float:left;
margin: 0 auto;
width: 100%;
height: 30%;
}

#red {
    background-color:red;
    height:30%;
width: 30%;
    float:left;
}

#green {
    background-color:green;
    height:30%;
width: 30%;
        float:left;
}

#blue {
    background-color:blue;
    height:30%;
width: 30%;
        float:left;
}
Теги:
css-float

5 ответов

2
Лучший ответ

Как насчет того, чтобы сделать width:33.3% margim:0 auto; width:33.3% и положить margim:0 auto; на обертке?

Проверь это:

http://jsfiddle.net/38L6Y/15/

Поделиться
  • 0
    я думаю, что это искусственно заставляет diff казаться центрированным из-за ширины. И я думаю, что это нормально ... но у меня на самом деле есть изображения внутри тех элементов div, которые я тоже хотел отцентрировать. Возникли проблемы с их центрированием вместе с див ...
  • 0
    Работает ли, если вы используете margin: 0 auto; в каждом цветном div? Это центрирует ваши изображения внутри?
Показать ещё 4 комментария
2

вместо того, чтобы делать margin: 0 auto; в html, body, используйте его в классе-оболочке

Проверьте следующую скрипту: jsFiddle Demo

Поделиться
  • 0
    это более правильно, хотя и не по центру. вот пересмотренный пример с изображениями, поскольку это то, что я пытаюсь центрировать jsfiddle.net/clam22/38L6Y/22
  • 1
    да, это правильно, он не будет в центре, так как вы дали ширину синего, красного и зеленого в 30%, что в сумме составляет 90%, а не 100%, поэтому измените его на 33,33%, оно будет отображаться по центру .. см. в скрипке .. . jsfiddle.net/38L6Y/31
Показать ещё 1 комментарий
1

Проблем больше, чем я впервые понял.

Некоторые из ваших процентов не имеют большого смысла.

Когда вы делаете элемент, скажем, 90%, это 90% его родительского элемента. Поэтому каждый раз, когда вы делаете div 90% внутри другого элемента, он будет на 10% меньше родительского.

Я также переместил margin: 0 auto в оболочку, поскольку это, похоже, имеет больше смысла.

Пожалуйста, попробуйте это.

html,body  {
background: #FFFFFF;
font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
height: 100%;
width: 100%;
} 


.wrapper {
margin: 0 auto;
height: 100%;
width:90%;
}

.row {
height: 30%;
}

#red {
background-color:red;
height:30%;
width: 33.33334%;
float:left;
}

#green {
background-color:green;
height:30%;
width: 33.33333%;
float:left;
}

#blue {
background-color:blue;
height:30%;
width: 33.33333%;
float:left;
}
Поделиться
  • 0
    Я получил это, насколько это jsfiddle.net/clam22/38L6Y/21, но это все еще не по центру. Я вставил изображение, потому что это по сути то, что я хочу центрировать. не просто пустые div
  • 0
    Вам нужно использовать height: auto на адаптивных изображениях, и вам нужно дать изображениям 33% (или 33.3333%, если хотите) ширину. смотрите здесь jsfiddle.net/8JgkP/1
Показать ещё 2 комментария
0

Или вы можете попробовать это (если вы все еще хотите, чтобы каждый div внутри класса.row имел ширину = 30%)

Проверьте этот JSfiddle

.row {
width: 100%;
height: 30%;
margin-left:5%; /*(100%-(30%*3))/2*/

}

Так как ваши divs (красный, зеленый, синий) имеют равную ширину = 30%, поэтому маржа слева и справа должна составлять 5%. Поэтому я использую margin-left: 5%, так как только ширина = 10%. 10%/2 = 5%.

Извините, если это не решение.

Обновлено: ознакомьтесь с этим обновленным JSFiddle с вашим изображением в каждом div.

Поделиться
0

Попробуй это.

html,body  {
 background: #FFFFFF;
 font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
 align:center!important;
 height: 100%;
 width: 100%;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню