Центр изображений адаптивного веб-сайта HTML

Эй, я пытаюсь центрировать свои изображения, когда кто-то использует ipad, в основном ниже 780 пикселей, но я не могу заставить их центрироваться, независимо от того, что я пытаюсь? Мое меню и панель навигации расположены по центру, но эти изображения не будут

Это на ПК с обычным браузером

Вот как это выглядит на планшете, но я хочу отцентрировать его.

Мой код здесь

<div class="container">
    <section id="news">
        <div>
        <div class="tagline"><h3 class="white">Current News</h3></div>
            <div id="spacer"></div>
            <div class="box">
            <img src="images/joker.jpg" alt=""/> 
            </div>
            <div class="box">
            <img src="images/joker.jpg" alt=""/> 
            </div>
            <div class="box">
            <img src="images/timber.jpg" alt=""/> 
            </div>
    </div>
    </section>
    </div>

CSS здесь

@media screen and (max-width:979px){
    /*Global */
    .container {
    width: 95%;
    margin: auto;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
}
.box img{
    width: 300px;
    height: 300px;
    margin: auto;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    }
    .box {
    padding-bottom: 15px;
    margin: auto;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    }
}

html css responsive-design
person Tomas Studnicky    schedule 19.03.2018    source источник
comment
Рассматривали ли вы использование бутстрапа? Или флексбокс? Использование современных инструментов избавит вас от головной боли, связанной с управлением позициями с помощью CSS.   -  person Callat    schedule 19.03.2018
comment
Просто добавьте text-align: center; к стилю окна img.   -  person    schedule 19.03.2018
comment
@Callat Каждый раз, когда кто-то предлагает использовать загрузку! чтобы решить простую проблему макета, это приходит на ум... i.stack.imgur.com/lRBds .jpg и это, конечно... meta.stackexchange.com/a/19492/180262   -  person Turnip    schedule 19.03.2018
comment
Вы можете попробовать .box img { display: block; }   -  person Hanif    schedule 19.03.2018
comment
Я пробовал выравнивание текста или отображение блока. Я пробовал много способов, поэтому у меня закончились варианты, и я пришел сюда.   -  person Tomas Studnicky    schedule 19.03.2018
comment
Затем вы должны опубликовать свой код в версии скрипта, откуда мы можем получить представление о том, что может быть влияние другого кода. Мы не знаем, что вы пробовали или нет.   -  person Hanif    schedule 19.03.2018

Ответы (3)


arrow_upward
2
arrow_downward

можешь попробовать: {

display:flex;
justify-content:center;

}

person eddy Salibi    schedule 19.03.2018
comment
Спасибо, что решили мою проблему - person Tomas Studnicky; 19.03.2018
comment
Любая идея, как я снова центрирую текстовые 3 поля - person Tomas Studnicky; 20.03.2018

arrow_upward
0
arrow_downward

Вы можете использовать флексбоксы.

.box {
  display: flex;
  justify-content: center;
  justify-items: center;
}

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

person Roman Kiyashev    schedule 19.03.2018

arrow_upward
0
arrow_downward

Вы должны реструктурировать свой HTML, добавив контейнер вокруг полей:

<div class="box-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Используйте flexbox для контейнера и дайте блокам одинаковое пространство на экране с помощью свойства flex:

/* Only for demo purposes */

body, html {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden; 
}

/* Main part: flexbox is added to the container box and the flex property allots them equal space with a margin of 10px as well */

.box-container {
    width: 100vw;
    display: flex;
}

.box {
    flex: 1 0 0;
    width: 120px;
    height: 120px;
    background-color: red;
    margin-right: 10px;
}

Вот ссылка на скрипку: jsfiddle

person Chirag Bhansali    schedule 19.03.2018
comment
Любая идея, как я снова центрирую текстовые 3 поля - person Tomas Studnicky; 20.03.2018
comment
Вы можете центрировать текст, используя flexbox для каждого поля и установив свойство «justify-content» на «center» и «align-items» на «center». - person Chirag Bhansali; 21.03.2018