html - Div不居中

Question

我有一组非常基本的 % 宽度 div。我正在尝试将元素置于 <div class="media-top-center"> 中.

这是HTML和CSS代码；

HTML

<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; 的 BIG 粉丝。我认为你应该调查一下。这是我最喜欢的居中指南，最简单的方法是使用 display flex。

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

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

所以你可以根据你的标准做这样的事情，确切地说:

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