Question

边距：@ auto时，元素不对齐中心;应用。请参阅此处的代码。 https://jsfiddle.net/helloworld123/vhhx1o7n/

我必须将页面中心的元素对齐（.entry-wrap应该与页面的中心对齐），并且它的子项（.entry）应该浮动到左边。

我在小提琴https://jsfiddle.net/helloworld123/n8o18ges/中有一定程度的工作，但我不希望第三行中的元素与中心对齐。

<div class="entry-wrap">
    <div class="entry">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
    </div>
    <div class="entry">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
    </div>
    <div class="entry">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
    </div>
    <div class="entry">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
    </div>
    <div class="entry">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
    </div>
</div>

body {
    background: #f8f8f8;
}
.entry-wrap {
    width: 500px;
  height: auto;
    margin: 0 auto;
  background: #ccc;
  padding: 10px;
}
.entry {
    float: left;
    border: 1px solid #f1f1f1;
    margin: 2px;
}

这就是我想要实现的目标

Answer 1

1。）在.entry上，使用display: inline-block;代替float: left;

2。）在.entry-wrap上使用text-align: center;

https://jsfiddle.net/fe6cmr07/

Answer 2

首先，entry-wrap中的所有元素都已浮动，因此entry-wrap正在折叠，要修复它，您可以向其添加overflow:hidden，或使用clearfix解决方案。

如果你想让子元素居中，那只需要播放包装div的宽度：

body {
    background: #f8f8f8;
}

.entry-wrap {
    width: 620px;
    margin: 0 auto;
  padding: 15px;
  background: #ccc;
  overflow: hidden;
}
.entry {
    float: left;
    border: 1px solid #f1f1f1;
  margin: 2px;
}

小提琴：https://jsfiddle.net/o8aj3hqL/

Answer 3

margin: 0 auto的阻止位于<body>的中心。问题在于子元素，因为它们是floated，除非您使用center aligned代替display: inline-block

，否则它不会是float: left

这里是小提琴https://jsfiddle.net/vhhx1o7n/1/

Answer 4

＆＃13;

body {
  background: #f8f8f8;
}
.entry-wrap {
  width: 618px;
  height: 318px;
  margin: 0 auto;
  background: #ccc;
  padding: 10px;
}
.entry {
  float: left;
  border: 1px solid #f1f1f1;
  margin: 2px;
}

＆＃13;

<div class="entry-wrap">
  <div class="entry">
    <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
  </div>
  <div class="entry">
    <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
  </div>
  <div class="entry">
    <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
  </div>
  <div class="entry">
    <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
  </div>
  <div class="entry">
    <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
  </div>
</div>

＆＃13;

定心元素不适用于margin：0 auto;

4 个答案: