Блог

Главная - Вопросы по программированию - Не удается центрировать поле процентной ширины внутри поля процентной ширины

Не удается центрировать поле процентной ширины внутри поля процентной ширины

#html #css

#HTML #css — файл #css

Вопрос:

У меня есть контейнер для жидкости шириной 96%.

Внутри этого контейнера у меня есть поле, которое также имеет процентную ширину.

Я не могу расположить поле по центру по горизонтали внутри оболочки. Обычный margin:0 auto; не работает — я думаю, потому что он имеет процентную ширину.

 <div id="wrapper">
    <div class="box">
        <img class="scales"... />
    </div>
</div>

Вот css:

 #wrapper {
    width:98%;
}

.box {
    width:40%;
}

.scales {
    width:100%;
}

Комментарии:

1. Бьюсь об заклад, вы просто думаете , что оно не центрировано, потому что изображение не центрировано.

2. Это отличный веб-сайт, который устранит некоторую путаницу, вы можете использовать position, чтобы помочь с вложением динамических элементов. learnlayout.com/position.html

Ответ №1:

Проблема, вероятно, в том, что ваше изображение не выглядит центрированным, поскольку оно, вероятно, меньше, чем 40% содержащего его div. В любом случае, нет причин для margin:0 auto; того, чтобы не работать. Решение для центрирования изображения:

 .box {
    width:40%;
    margin:0 auto;
    text-align: center;
}

Ответ №2:

Попробуйте вот так: ДЕМО

CSS:

 #wrapper {
    width:98%;
     background-color:#999;
}
.box {
    width:40%;
    margin:0 auto;
    display:block;
    background-color:#ccc;
}
.scales {
    width:100%;
}