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

因为.top-center是div元素的默认值display:block，因此宽度为100％且margin：auto无效。尝试更改显示以根据内容和中心进行调整：

.top-center {
  display:inline-block;
}

这是有效的，因为您拥有父text-align:center

Answer 2

如果您没有将宽度设置为元素，则无法将div与margin: 0 auto;居中。将宽度添加到.top-center以使其正常工作。

.top-center{
  margin: 0 auto !important;
  width: 80%; /* add wanted width */
}

Answer 3

我是display: flex;的 BIG 粉丝。我想你应该调查一下。以下是我最喜欢的内容指南，最简单的方法是使用display flex。

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

它甚至可以让您通过类似流程图的体验来获得您想要的效果。

所以你可以做这样的事情，具体取决于你的标准，确切地说：

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

Div不居中

3 个答案: