首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使CSS列居中出现问题

使CSS列居中出现问题
EN

Stack Overflow用户
提问于 2021-06-27 05:20:02
回答 1查看 52关注 0票数 0

我在css中有一个三列的框,我需要它在桌面上的页面居中,然后在600px或更少的顶部堆叠的列。除了在桌面视图上居中之外,我已经让所有东西都正常工作了。

我尝试添加justify-content: relative,添加包装器align: center和其他几行不起作用的代码。任何帮助都是非常感谢的。

这是我目前拥有的代码:

代码语言:javascript
复制
* {
  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%;
  }
}
代码语言:javascript
复制
<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>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-27 06:16:40

将一个专用类应用于这些列的父类(在我的示例中为:class="x"),对其使用display: flex;justify-content: center,并在媒体查询中将其更改为flex-direction: column (将它们放在彼此下方)和align-items: center; (使它们居中)。忘了花车吧..。

代码语言:javascript
复制
* {
  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;
  }
}
代码语言:javascript
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68146328

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档