如何将内容集中在flex项中？

Question

我正在尝试疯狂，但我无法将此表中的文本（我使用flex构建）置于中心位置。所有内容都应垂直居中。任何想法我怎么能实现这一目标？任何形式的帮助都非常感谢。我现在试了几个小时。

非常感谢！

.wrapper {
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  background-color: silver;
  border-top: 2px solid #000;
}

.wrapper>div {
  height: 250px;
}

.ct-title {
  flex: 1 40%;
  background: deepskyblue;
  text-align: left;
}

.ct-content-1 {
  flex: 1 20%;
  background: gold;
}

.ct-content-2 {
  flex: 1 20%;
  background: hotpink;
  border-left: 4px solid #000;
  border-right: 4px solid #000;
}

.ct-content-3 {
  flex: 1 20%;
  background: lime;
}

<div class="wrapper">
  <div class="ct-title">Title
    <p>This is some text in a paragraph.</p>
  </div>
  <div class="ct-content-1">6</div>
  <div class="ct-content-2">8</div>
  <div class="ct-content-3">12</div>
</div>

Answer 1

试试这个。你也需要对孩子施加屈服。

＆＃13;

＆＃13;

SET @BeginDateLastYear = 
    DATEADD(
        wk, 
        CASE WHEN DATEPART(wk,DATEADD(wk, -52   , @BeginDate))<> DATEPART(wk,@BeginDate) 
            THEN -53 
            ELSE -52 END, 
        @BeginDate
            )

＆＃13;

.wrapper {
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  background-color: silver;
  border-top: 2px solid #000;
}

.wrapper>div {
  height: 250px;
      display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.ct-title {
  flex: 1 40%;
  background: deepskyblue;
  text-align: left;
}

.ct-content-1 {
  flex: 1 20%;
  background: gold;
}

.ct-content-2 {
  flex: 1 20%;
  background: hotpink;
  border-left: 4px solid #000;
  border-right: 4px solid #000;
}

.ct-content-3 {
  flex: 1 20%;
  background: lime;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

请尝试以下代码

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  background-color: silver;
  border-top: 2px solid #000;

}

.wrapper>div {
  height: 250px;
}

.ct-title {
  flex: 1 40%;
  background: deepskyblue;
  text-align: left;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

}

.ct-content-1 {
  flex: 1 20%;
  background: gold;
   display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.ct-content-2 {
  flex: 1 20%;
  background: hotpink;
  border-left: 4px solid #000;
  border-right: 4px solid #000;
    display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.ct-content-3 {
  flex: 1 20%;
    align-items: center;
   display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

＆＃13;

<div class="wrapper">
  <div class="ct-title">Title
    <p>This is some text in a paragraph.</p>
  </div>
  <div class="ct-content-1">6</div>
  <div class="ct-content-2">8</div>
  <div class="ct-content-3">12</div>
</div>

＆＃13;

＆＃13;

＆＃13;