text centering on CSS with flexbox

2018-06-27 04:26:10

This question already has an answer here:

Flexbox: center horizontally and vertically 8 answers

要将.item儿童放在.parent中心，请使用以下代码：

<!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>

你需要添加align-items:center和一个新的display:flex到孩子

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;
}

<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>

链接地址: http://www.djcxy.com/p/76002.html

上一篇: 如何将中心页面中的flex块居中？

下一篇: 以flexbox为中心的CSS文本