Question

我查看了堆栈溢出的示例，其问题与我的相似，但没有成功。我不知道我在做什么，这是错的，但div不会横向中间到目前为止它只适用于某些分辨率屏幕，但如果我将它加载到不同的屏幕，它不在中间，所以我使用{{1}但仍然没有用。

HTML

margin: 0 auto;

CSS

<div class="margin">
    <div class="BoxContainer">
        <a href="https://medium.com/@sudeep_shahi"><div class="box"><img src="img/medium.png" alt="medium" style="width:100%;height:100%;"></div></a>
        <a href="www.linkedin.com/in/sudeep-shahi-92375010a"><div class="box"><img src="img/linkdin.png" alt="linkdin" style="width:100%;height:100%;"></div></a>
        <a href="https://www.instagram.com/westkinz/?hl=en"><div class="box"><img class="effect" src="img/instagram.png" alt="Itragram" style="width:100%;height:100%;"></div></a>
    </div>          
</div>

Answer 1

要使用<div>将margin: auto居中，您需要手动设置<div>的宽度，否则默认display: block将占用100％的可用空间，你将无法使元素居中。

提供.margin班级width: 300px，它将居中。

Answer 2

根据我的理解，你正试图做这样的事情

<div class="centered">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

你做错了是你在父节点中将text-align设置为左边，后面是所有子节点

.centered{
    text-align: center;
}
.box{
    display: inline-block;
    height:100px;
    width: 100px;
    padding: 3px;
    border: 1px solid black;
}

希望这是您正在寻找的答案

我试图通过使用边距使div在中间水平自动调整

2 个答案: