Question

我做了一个神奇的技巧，通过给它一个margin:--px auto来居中，但它不起作用。这可能是什么问题？

<div class="single-view-container" style="display: block;">
     <div id="single-view" class="single-view grid-100 grid-parent">center me</div>
</div>

  .single-view-container {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 3;
      overflow: auto;
      background: rgba(0, 0, 0, 0.3);
      display: none;}

  .single-view {
      color: white;
      max-width: 100px;
      width: 100%;
      display: inline-block;
      margin: 20px auto;
      height:100px;
      background:red;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
      border-radius: 2px;
      padding-bottom: 10px;
  }

Answer 1

margin: 0 auto处理具有固定宽度的块元素，因此如果您更改为display: block（或完全删除它，因为它是div的默认值），它将作为预期

旁注：如果要将inline元素（或inline-block）居中，请在其父级上设置text-align: center。

＆＃13;

  .single-view-container {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 3;
      overflow: auto;
      background: rgba(0, 0, 0, 0.3);
      display: none;}

  .single-view {
      color: white;
      max-width: 100px;
      width: 100%;
      display: block;
      margin: 20px auto;
      height:100px;
      background:red;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
      border-radius: 2px;
      padding-bottom: 10px;
  }

＆＃13;

<div class="single-view-container" style="display: block;">
     <div id="single-view" class="single-view grid-100 grid-parent">center me</div>
</div>

＆＃13;

Answer 2

当您将元素更改为display: inline-block时，自动不再有效，因为它是一个内联元素，您需要让其父元素text-align: center;

.single-view-container {
  text-align: center;
}

Answer 3

用这个修改你的css .single-view：

.single-view {
    color: white;
    text-align: center;
    max-width: 100px;
    width: 100%;
    display: inline-block;
    margin: 20px auto;
    height:100px;
    background:red;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
    border-radius: 2px;
    padding-bottom: 10px;
}

Answer 4

JSFiddle

添加，

  text-align:center;
  display:block;

HTML：

<div class="single-view-container" style="display: block;">
     <div id="single-view" class="single-view grid-100 grid-parent">center me</div>
</div>

CSS：

.single-view-container {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 3;
      overflow: auto;
      background: rgba(0, 0, 0, 0.3);
      display: none;}

  .single-view {
      color: white;
      max-width: 100px;
      width: 100%;
      margin: 20px auto;
      height:100px;
      background:red;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
      border-radius: 2px;
      padding-bottom: 10px;
      text-align:center;
      display:block;
  }

Answer 5

为中心。

＆＃13;

#single-view {
  width:200px;
  background: green;
  margin-left:auto;
  margin-right:auto;
}

＆＃13;

  <div id="single-view">center me</div>

＆＃13;

Answer 6

你正在使用bootstrap？放入元素“文本中心”以使其居中。

<div class="single-view-container text-center" style="display: block;">
  <div id="single-view" class="single-view grid-100 grid-parent">center me</div>
</div>

以div为中心是行不通的

6 个答案: