如何使用margin来居中inline-block元素

时间:2017-12-28 22:22:11

标签: html css centering

HTML:

<div id="wrap">
    <div id="block1"></div>
    <div id="block2"></div>
</div>

CSS:

div#wrap{
    margin-top: 3em;
    border: solid 1px black;
    text-align: center;
}

div#wrap *{
    display: inline-block;
    width: 12.5em;
    margin-top: 1em;
    height: 8em;
}

div#wrap *:not(:last-child){
    margin-right: 8em;
}

#block1{
    background: orange;
}

div#wrap #block2{
    background: magenta;
}

这两个区块应该以响应式设计模式为中心。当屏幕足够宽以连续有2个块时,代码可以工作。但是当我缩小屏幕时,顶部块由于边距而向左移动:

enter image description here

fiddle

是否可以在没有媒体查询的情况下解决此问题?

修改

我试过flex-box:

div#wrap{
    margin-top: 3em;
    border: solid 1px black;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

fiddle2

2 个答案:

答案 0 :(得分:1)

解决方案是使用flex和justify-content:space-around并删除边距:

div#wrap {
  margin-top: 3em;
  border: solid 1px black;
  justify-content:space-around;
  display: flex;
  flex-wrap: wrap;
}

div#wrap * {
  display: inline-block;
  width: 12.5em;
  margin-top: 1em;
  height: 8em;
}

#block1 {
  background: orange;
}

#block2 {
  background: magenta;
}
<div id="wrap">
  <div id="block1"></div>
  <div id="block2"></div>
</div>

答案 1 :(得分:0)

如果使用带有负边距的容器,则无需在不同断点处更改行端点的边距,您可以使用内联块。我在容器中将font-size设置为零,这样我就可以使用百分比来计算宽度,而不必担心空白区域。

div#wrap {
  margin-top: 3em;
  border: solid 1px black;
  padding: 20px;
  text-align: center;
}

.block {
  display: inline-block;
  width: 12.5em;
  margin: 20px;
  height: 8em;
  font-size: 16px;
}

.block-container {
  margin: -20px;
  font-size: 0;
}

#block1 {
  background: orange;
}

#block2 {
  background: magenta;
}
<div id="wrap">
  <div class="block-container">
    <div class="block" id="block1"></div>
    <div class="block" id="block2"></div>
  </div>
</div>