Question

我正在学习flex box，无法让我的文字居中对齐。

我知道我可以使用padding进行垂直对齐，但我希望它更像是自动居中，而不是每次都编辑每个项目。

尽管this link确实有所帮助，但这并不是我想要的。

我需要让我的.item以最少的代码水平和垂直居中。

＆＃13;

.parent {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  flex-wrap: wrap;
}
.item {
  color: white;
  margin: 0px;
  width: auto;
  height: 200px;
  background-color: blue
}

＆＃13;

<div class="example">
  <h2> Display: flex </h2>
  <div class="example-content">
    <div class="parent">
      <div class="item">If you wanna</div>
      <div class="item">Then you gotta</div>
      <div class="item">Go findz it</div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您需要向孩子添加align-items:center和新的display:flex

＆＃13;

body {
  margin: 0
}
.parent {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  flex-wrap: wrap;
  border: black solid;
  color: white
}
.item {
  display: flex;
  align-items: center;
  height: 200px;
  background: lightgreen;
}

＆＃13;

<div class="example">
  <h2> Display: flex </h2>
  <div class="example-content">
    <div class="parent">
      <div class="item">If you wanna</div>
      <div class="item">Then you gotta</div>
      <div class="item">Go findz it</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

要在 .parent 中居中 .item 子项，请使用以下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .parent {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 200px;
            }
            .item {
                align-content: center;
            }
        </style>
    </head>
    <body>
        <div class="example">
            <h2> Display: flex </h2>
            <div class="example-content">
                <div class="parent">
                    <div class="item">If you wanna</div>
                    <div class="item">Then you gotta</div>
                    <div class="item">Go findz it</div>
                </div>
            </div>
        </div>
    </body>
</html>

以flexbox为中心的CSS文本

2 个答案: