Question

这种情况对flex有用吗？因为我不能text-align:center第2项（全宽）。

<div class="container">
<div class="item1"></div>
<div class="item2"></div>
</div>

flex problem http://oi65.tinypic.com/2i26d7q.jpg

编辑：我确实更改了图像，因为容器颜色是白色的（作为页面背景）......

Answer 1

您可以将item1和item2同时设为display：flex并make justify-content：center和align-items：center将内容放在这些div上

检查代码段

＆＃13;

.container {
  display: flex;
}
.container div {
  background: black;
  color: red;
}
.item1 {
  width: 50px;
  height: 50px;
  align-items: center;
  display: flex;
  justify-content: center;
}
.item2 {
  margin-left: 10px;
  width: 100%;
  height: 70px;
  align-items: center;
  display: flex;
  justify-content: center;
}

＆＃13;

<div class="container">
  <div class="item1">text</div>
  <div class="item2">text</div>
</div>

＆＃13;

希望有所帮助

Answer 2

以下是使用flex: grow; .item1 和 .item2

的示例

<强> CSS：

.container {
   display: flex;
   flex-wrap: wrap-reverse;
   width: 700px;
   background-color: black;
   padding:33px;
   vertical-align:middle;
}

.item1 {
   flex-grow: 1;
   background: yellowgreen;
   height:200px;
   margin: 15px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center
}

.item2 {
   flex-grow: 2;
   background: aquamarine;
   height:200px;
   margin: 15px;
   display: inline-block;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center
}

<强> HTML

<div class="container">
    <div class="item1">text</div>
    <div class="item2">text</div>
</div>

JSFiddle

如何使用此flex架构进行文本对齐：居中？

2 个答案: