在每个窗口宽度中将div放在容器的中心

作者: 筱梨
发布时间: 2024-04-19 07:28:34 (5天前)
转自：

3 条回复

0#
回复此人
解天 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你应该将text-align：center添加到parent .seas，使内部.sea与display：inline-block;覆盖白色空间。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .seas { margin-right: auto; margin-left: auto; text-align:center; } /* THE INNER BOXES DIVS */ .sea { min-width: 250px; min-height: 300px; display: inline-block; margin-top: 20px; margin-right: 10px; background-color:Red; vertical-align:top } @media screen and (max-width: 980px) { .sea { margin-left: 20px; } } @media screen and (max-width: 800px) { .sea { margin-left: 50px; } } @media screen and (max-width: 360px) { .sea { margin-left: 20px; } } @media screen and (max-width: 320px) { .sea { margin-left: 5px; } } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <div class="seas" id="seas"> <div class="sea homeWindow"> </div> <div class="sea homeWindow"> </div> <div class="sea homeWindow"> </div> <div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 解决方案在这里： </p> <pre> <code> @media only screen and (max-device-width: 980px) { .seas { max-width: 90%; } .sea { margin-right: 20px; } } @media only screen and (max-device-width: 970px) { .seas { max-width: 100%; } .sea { margin-right: 20px; } } @media only screen and (max-device-width: 800px) { .seas { max-width: 80%; } .sea { margin-right: 20px; } } @media only screen and (max-device-width: 770px) { .seas { max-width: 80%; } } @media only screen and (max-device-width: 360px) { .seas { max-width: 85%; } } @media only screen and (max-device-width: 320px) { .seas { max-width: 100%; } } </code> </pre> </DIV>

编辑

登录后才能参与评论