Question

In [377]: df['Check'] = df.apply(lambda x: 'Y' if x['Dates'] in lookup and x['Contracts'] in lookup[x['Dates']] else 'N', 
     ...: axis=1)
In [378]: df
Out[378]: 
  Contracts  Dates Check
0         A  date1     Y
1         B  date1     Y
2         C  date1     N
3         A  date2     N
4         B  date2     Y
5         C  date2     N
6         A  date3     N
7         B  date3     N
8         C  date3     N

body {
  background: #212121;
}

.wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.holder{
  height: 50%;
  width: 100%;
  position: absolute;
  top: 25%;
  left: 0%;
}

.content {
  height: 100%;
  width: 400px;
  margin: 10px;
  display: inline-block;
  background: #424242;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}

.detailBox {
  height: 100%;
  display: inline-block;
  font-size: 0;
  margin: 0 auto;
}

即使<div class="wrapper"> <div class="holder"> <div class="detailBox"> <div class="content" id="row1"> <div class="wordInputContainer"> <div class="inputBox"> </div> </div> </div> <div class="content" id="row2"> <div class="wordOutputContainer"> <div class="listBox">   </div> </div> </div> <div class="content" id="row3"> <div class="wordStatisticContainer"> <div class="wordCount"></div> <div class="commonLetter"></div> <div class="commonWord"></div> <div class="longestWord"></div> <div class="shortestWord"></div> </div> </div> </div> </div> </div>上有margin: 0 auto;，它仍然没有居中。是因为它没有固定宽度吗？它没有固定的宽度，因为我希望.detailedBox是所有.detailedBox组合的宽度，但也是居中的。

Answer 1

如果您将display: flex更改为justify-content: center（而不是内嵌块），然后执行{{1}}，那么它会将该div水平居中。

Answer 2

由于.detailBox设置为inline-block，因此无法使用margin:0 auto将其居中。理解这一点的一种方法是“边缘居中”技术依赖于“填充”可用的水平空间。但是在使用内联元素时没有可用空间。（参考：margin:auto; with inline-block。）

另请注意：

10.3.9'内联块'，正常流程中未替换的元素
如果'width'为'auto'，则使用的值是浮动元素的收缩宽度 'margin-left'或'margin-right'的计算值'auto'成为'0'的使用值 - w3.org

另一种方法是让.detailBox默认为display:block，并将text-align:center设置为水平居中于.content的子inline-block元素。

body {
  background: #212121;
}

.wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.holder {
  height: 50%;
  width: 100%;
  position: absolute;
  top: 25%;
  left: 0%;
}

.content {
  height: 100%;
  width: 100px;
  margin: 10px;
  display: inline-block;
  background: #424242;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}

.detailBox {
  height: 100%;
  font-size: 0;
  text-align:center;
}

<div class="wrapper">
  <div class="holder">
    <div class="detailBox">
      <div class="content" id="row1">
        <div class="wordInputContainer">
          <div class="inputBox">

          </div>
        </div>
      </div>
      <div class="content" id="row2">
        <div class="wordOutputContainer">
          <div class="listBox">
            <!-- List Elements Go Here -->
            <!-- Words Output In Alphabetical Order [A - Z] -->
          </div>
        </div>
      </div>
      <div class="content" id="row3">
        <div class="wordStatisticContainer">
          <div class="wordCount"></div>
          <div class="commonLetter"></div>
          <div class="commonWord"></div>
          <div class="longestWord"></div>
          <div class="shortestWord"></div>
        </div>
      </div>
    </div>
  </div>
</div>

您提到您希望.detailBox为所有内容组合的宽度。因此，如果由于某种原因您需要.detailBox保留inline-block，则可以在它的父级text-align:center上设置.holder。像这样：

body {
  background: #212121;
}

.wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.holder {
  height: 50%;
  width: 100%;
  position: absolute;
  top: 25%;
  left: 0%;
  text-align:center;
}

.content {
  height: 100%;
  width: 100px;
  margin: 10px;
  display: inline-block;
  background: #424242;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}

.detailBox {
  height: 100%;
  display:inline-block;
  font-size: 0;
}

<div class="wrapper">
  <div class="holder">
    <div class="detailBox">
      <div class="content" id="row1">
        <div class="wordInputContainer">
          <div class="inputBox">

          </div>
        </div>
      </div>
      <div class="content" id="row2">
        <div class="wordOutputContainer">
          <div class="listBox">
            <!-- List Elements Go Here -->
            <!-- Words Output In Alphabetical Order [A - Z] -->
          </div>
        </div>
      </div>
      <div class="content" id="row3">
        <div class="wordStatisticContainer">
          <div class="wordCount"></div>
          <div class="commonLetter"></div>
          <div class="commonWord"></div>
          <div class="longestWord"></div>
          <div class="shortestWord"></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS - Div不居中

2 个答案: