Question

我有一个非常基本的弹性设置，无论出于什么原因，所讨论的div都不会在其父标签内垂直居中。您可以在下面看到隔离的测试用例。

＆＃13;

.likeness-rank-table {
  border-radius: 3px;
  margin-bottom: 20px;
  display: block;
}
.likeness-rank-table .col {
  box-sizing: border-box;
  text-align: center;
  position: relative;
  flex: 1;
  max-width: 20%;
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
}
.likeness-rank-table .col .col-inner {
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 150px;
}
.likeness-rank-table .likeness-rank-table-body {
  display: flex;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border: 1px solid #a2a5a7;
}
.draggable-tags .draggable-tag {
  display: inline-block;
  float: left;
  width: 20%;
  margin-bottom: 5px;
}
.draggable-tag {
  text-align: center;
  padding: 0 15px;
  box-sizing: border-box;
}
.draggable-tag .draggable-tag-inner {
  position: relative;
  padding: 10px 0;
  background-color: #63b3ce;
  color: #fff;
}

＆＃13;

<div class="likeness-rank-table">
  <div class="likeness-rank-table-body">
    <div class="col">
      <div class="col-inner droppable">
        <div class="draggable-tag ui-draggable">
          <div class="draggable-tag-inner">
            This Blue Box Should Be Horizontally and Vertically Centered Inside The Big White Box But It's Not
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

这是一个可以看到它的编码器：

http://codepen.io/trevorhinesley/pen/grQKPO

Answer 1

某些flex属性仅适用于flex项目，而其他仅适用于Flex容器。

char **str_split(char *a[], char *a_str, const char a_delim) { char **result = 0; size_t count = 0; char *tmp = a_str; char *last_comma = 0; char delim[2]; delim[0] = a_delim; delim[1] = 0; /* Count how many elements will be extracted. */ while (*tmp) { if (a_delim == *tmp) { count++; last_comma = tmp; } tmp++; } /* Add space for trailing token. */ count += last_comma < (a_str + strlen(a_str) - 1); /* Add space for terminating null string so caller knows where the list of returned strings ends. */ count++; result = malloc(sizeof(char *) * count); if (result == NULL) { printf("Error allocating memory!\n"); //print an error message return result; //return with failure } if (result) { size_t idx = 0; char *token = strtok(a_str, delim); while (token) { assert(idx < count); *(result + idx++) = strdup(token); /* memory leak! how to free() */ token = strtok(0, delim); } assert(idx == count - 1); *(result + idx) = 0; } return result; }和align-items属性仅适用于Flex容器。然而，你在弹性项目中使用它们......

justify-content

......所以他们被忽略了。

您需要在上面的规则中添加.likeness-rank-table .col .col-inner { flex: 1; align-items: center; justify-content: center; height: 150px; }。这将使display: flex起作用。

但是，align-items: center将继续失败，因为父级有justify-content: center限制水平移动。

max-width: 20%

因此，将水平居中应用于另一个级别的父级。

.likeness-rank-table .col {
  box-sizing: border-box;
  text-align: center;
  position: relative;
  flex: 1;
  max-width: 20%;            /* limits horizontal centering of child element */
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
}

Revised Codepen

以下是按父母和子女分类的灵活属性的有用列表：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您需要在@include flex（scss的第40行）col-inner，align-items和justify-content仅适用于flexbox元素（see this handy guide ）。

然后，要在大白框内对齐.col元素，您可以在scss的第47行将justify-content: center添加到.likeness-rank-table-body。

Flexbox - 证明内容：居中和对齐项目：中心不工作？

2 个答案: