gpt4 book ai didi

html - 缩小并安装在新行中时将两个 DIV 居中

转载 作者:行者123 更新时间:2023-11-28 09:35:40 26 4
gpt4 key购买 nike

我有 4 个 DIV 排成一行,宽度为:50% 并且向左浮动,以便其中两个可以排成一行。它们必须有一个最小宽度,这样内容才能完整显示。当我缩小页面时,我只剩下一行中的一个 div(这是我想要的)但它不再居中......

我希望这些 DIV 始终居中!谁能帮帮我?

HTML代码:

    <div class="row">
<div class="app-screen-div">
<div class="app-screen">
<img src="images/deal_list.png" alt="Deal Liste">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/code_scan.png" alt="Scan">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/deals_begonnen.png" alt="Started Deals">
</div>
</div>
<div class="app-screen-div">
<div class="app-screen">
<img src="images/enter_deal.png" alt="Enter Deal">
</div>
</div>
</div>

CSS:

    .row {
margin:auto;
padding:auto;
}

.app-screen-div{
float:left;
width:50%;
min-width:280px;
margin:auto;
text-align: center;
position: relative;
}

.app-screen{
border-style:solid;
border-radius:5px;
padding: 1px;
border: 1px solid grey;
background-color:#ff5253;
width:280px;
margin:auto;
}

.app-screen > img {
display: block;
max-width: 100%;
height: auto;
}

谢谢!

最佳答案

解决方案是使用 display: inline-block 而不是 float: left 并且我使用了 text-align: center。查看 http://jsfiddle.net/rqh0ompa/4/ 中的示例.请注意,您必须将结果部分放大很多才能看到变化/

关于html - 缩小并安装在新行中时将两个 DIV 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25538804/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com