Question

嘿，当有人使用的ipad基本上低于780px时，我试图将我的图像居中，但无论我尝试什么，我都无法将它们放在中心位置？我的菜单和导航栏都集中在这些图像赢得

之后

This is the way it looks on tablet but i want to center it.

我的代码在这里

<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;
    }
}

Answer 1

你可以试试： {

display:flex;
justify-content:center;

}

Answer 2

您可以使用flexboxes。

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

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

Answer 3

您应该通过在框周围添加容器来重构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

HTML响应式网站图像中心

3 个答案: