div 未居中

Question

我有一个非常基本的 div 百分比宽度集。我试图将元素集中在<div class="media-top-center">.

这是 HTML 和 CSS 代码；

超文本标记语言

<div class="media-top-wrapper">
  <div class="media-top-left">
    Posted by <a href="<%= uploader.profilePath %>"><%= uploader.name %></a> from <a href="<%= attribution %>"><%= attribution_name %></a>
  </div>
  <div class="media-top-center">
    <div class="top-center media-card-avatar-round" style="background-image:url('<%= uploader.avatar %>');"></div>
  </div>
  <div class="media-top-right">
    <div class="heart"></div>
    <div class="repost"></div>
    <div class="flag"></div>
  </div>
</div>

CSS

.media-top-wrapper{
  max-width: 100%;
  margin: 0 auto;
}

.card-media-top-wrapper{
  max-width: 100%;
  margin: 0 auto;
}

.media-top-left,
.media-top-right{
  width: 36%;
  float: left;
  box-sizing: border-box;
}

.media-top-center{
  width: 28%;
  float: left;
  box-sizing: border-box;
}

.card-media-top-left,
.card-media-top-right{
  width: 50%;
  float: left;
  padding: 0 0.5em 0.25em 0.5em;
  box-sizing: border-box;
}

.media-top-left{
  padding-top: 1em;
  text-align: left;
}
.media-top-center{
  text-align: center;
}
.media-top-right{
  text-align: right;
}

.top-center{
  margin: 0 auto !important;
}

我之前已经用 集中了一些东西margin: 0 auto，非常基本。但在这种情况下，它不起作用。请帮忙。

Answer 1

我是 的忠实粉丝display: flex;。我认为你应该调查一下。这是我最喜欢的关于如何居中的指南，最简单的方法是使用display flex.

https://css-tricks.com/centering-css-complete-guide/

它甚至会引导您通过类似流程图的体验来获得您想要的东西。

因此，您可以根据您的标准执行类似的操作：

.media-top-wrapper {
    display: flex;
    justify-content: space-around;
}