无法将 CSS 列居中
Trouble centering CSS columns
我在 css 中有一个三列框,我需要它在桌面页面上居中,然后以 600 像素或更小的间距将各列堆叠在一起。除了以桌面视图为中心外,我一切正常。
我尝试添加 justify-content: relative,添加包装器 align: center 和其他几行无效的代码。非常感谢任何帮助。
这是我目前拥有的代码:
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 178px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<p align="center">
<font size="5" color="336699"><strong>Great American Song Contest</strong></font>
</p>
<p align="center">
<font size="3" color="a91e21"><strong>3 Easy Ways To Enter Your Songs</strong></font>
</p>
<div class="wrapper">
<div class="row">
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Form-Prepage.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-online.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Entry-Direct.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-email.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/entry-mail.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-mail.gif" alt="" width="178" height="158"></a>
</p>
</div>
</div>
</div>
<div align="center"> <img src="//shield.sitelock.com/shield/greatamericansong.com" id="sl_shield_image" style="cursor: pointer;" alt="SiteLock" align="middle" />
<script id="sl_shield" type="text/javascript" src="//shield.sitelock.com/sitelock.js" language="javascript"></script>
</div>
<p align="center">
<p></p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
<p>
<font size="3" color="a91e21"><strong>2021 Rules & Entry:</strong></font>
</p>
<p>The Great American Song Contest is open to songwriters, lyricists & music composers worldwide.</p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
将专用 class 应用到这些列的父级(在我的示例中:class="x"
),在其上和媒体中使用 display: flex;
和 justify-content: center
查询将其更改为 flex-direction: column
(将它们放在彼此下方)和 align-items: center;
(使它们居中)。忘记花车...
* {
box-sizing: border-box;
}
.column {
width: 178px;
}
.x {
display: flex;
justify-content: center;
}
@media screen and (max-width: 600px) {
.x {
flex-direction: column;
align-items: center;
}
}
<p align="center">
<font size="5" color="336699"><strong>Great American Song Contest</strong></font>
</p>
<p align="center">
<font size="3" color="a91e21"><strong>3 Easy Ways To Enter Your Songs</strong></font>
</p>
<div class="wrapper">
<div class="x">
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Form-Prepage.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-online.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Entry-Direct.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-email.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/entry-mail.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-mail.gif" alt="" width="178" height="158"></a>
</p>
</div>
</div>
</div>
<div align="center"> <img src="//shield.sitelock.com/shield/greatamericansong.com" id="sl_shield_image" style="cursor: pointer;" alt="SiteLock" align="middle" />
<script id="sl_shield" type="text/javascript" src="//shield.sitelock.com/sitelock.js" language="javascript"></script>
</div>
<p align="center">
<p></p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
<p>
<font size="3" color="a91e21"><strong>2021 Rules & Entry:</strong></font>
</p>
<p>The Great American Song Contest is open to songwriters, lyricists & music composers worldwide.</p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
我在 css 中有一个三列框,我需要它在桌面页面上居中,然后以 600 像素或更小的间距将各列堆叠在一起。除了以桌面视图为中心外,我一切正常。
我尝试添加 justify-content: relative,添加包装器 align: center 和其他几行无效的代码。非常感谢任何帮助。
这是我目前拥有的代码:
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 178px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<p align="center">
<font size="5" color="336699"><strong>Great American Song Contest</strong></font>
</p>
<p align="center">
<font size="3" color="a91e21"><strong>3 Easy Ways To Enter Your Songs</strong></font>
</p>
<div class="wrapper">
<div class="row">
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Form-Prepage.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-online.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Entry-Direct.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-email.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/entry-mail.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-mail.gif" alt="" width="178" height="158"></a>
</p>
</div>
</div>
</div>
<div align="center"> <img src="//shield.sitelock.com/shield/greatamericansong.com" id="sl_shield_image" style="cursor: pointer;" alt="SiteLock" align="middle" />
<script id="sl_shield" type="text/javascript" src="//shield.sitelock.com/sitelock.js" language="javascript"></script>
</div>
<p align="center">
<p></p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
<p>
<font size="3" color="a91e21"><strong>2021 Rules & Entry:</strong></font>
</p>
<p>The Great American Song Contest is open to songwriters, lyricists & music composers worldwide.</p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
将专用 class 应用到这些列的父级(在我的示例中:class="x"
),在其上和媒体中使用 display: flex;
和 justify-content: center
查询将其更改为 flex-direction: column
(将它们放在彼此下方)和 align-items: center;
(使它们居中)。忘记花车...
* {
box-sizing: border-box;
}
.column {
width: 178px;
}
.x {
display: flex;
justify-content: center;
}
@media screen and (max-width: 600px) {
.x {
flex-direction: column;
align-items: center;
}
}
<p align="center">
<font size="5" color="336699"><strong>Great American Song Contest</strong></font>
</p>
<p align="center">
<font size="3" color="a91e21"><strong>3 Easy Ways To Enter Your Songs</strong></font>
</p>
<div class="wrapper">
<div class="x">
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Form-Prepage.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-online.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/Entry-Direct.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-email.gif" alt="" width="178" height="158"></p>
</div>
<div class="column">
<p>
<a href="https://www.greatamericansong.com/newsite-backup/entry-mail.php/"><img src="https://www.greatamericansong.com/newsite-backup/images/submit-mail.gif" alt="" width="178" height="158"></a>
</p>
</div>
</div>
</div>
<div align="center"> <img src="//shield.sitelock.com/shield/greatamericansong.com" id="sl_shield_image" style="cursor: pointer;" alt="SiteLock" align="middle" />
<script id="sl_shield" type="text/javascript" src="//shield.sitelock.com/sitelock.js" language="javascript"></script>
</div>
<p align="center">
<p></p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>
<p>
<font size="3" color="a91e21"><strong>2021 Rules & Entry:</strong></font>
</p>
<p>The Great American Song Contest is open to songwriters, lyricists & music composers worldwide.</p>
<p align="center"><strong>* WRITERS RETAIN ALL RIGHTS TO THEIR SONGS, LYRICS & COMPOSITIONS *</strong></p>