Css 如何在flexbox容器中居中放置此文本？_Css_Flexbox

Css 如何在flexbox容器中居中放置此文本？

css

Css 如何在flexbox容器中居中放置此文本？,css,flexbox,Css,Flexbox,我正在做一个小组项目，我们试图复制此网站，我被分配到以下部分：我已经用flexbox安排好了所有内容，但由于某些原因，无法使右侧部分的文本居中。到目前为止，我得到的是：我尝试使用justify content:center和align items:center，但文本没有任何变化。如何将所有内容对齐到中心以下是我在代码笔中的所有代码：这是我的HTML： '<body> <div class="container"> <div clas

我正在做一个小组项目，我们试图复制此网站，我被分配到以下部分：

我已经用flexbox安排好了所有内容，但由于某些原因，无法使右侧部分的文本居中。到目前为止，我得到的是：

我尝试使用

justify content:center

和

align items:center

，但文本没有任何变化。如何将所有内容对齐到中心

以下是我在代码笔中的所有代码：

这是我的HTML：

'<body>
<div class="container">
  <div class="ten-img">
    <h1>10</h1>
  </div>
  <div class="yrs-exp">
    <h2>Years Of Experience</h2>
    <p>
      DreamSoft is a team of highly experienced app designers and developers
      creating unique software for you.
    </p>
    <button>Get In Touch</button>
  </div>
  <div class="deats-cont">
    <div class="deat" id="deat-1">
      <h1>2K</h1>
      <p>Apps developed</p>
    </div>
    <div class="deat" id="deat-2">
      <h1>40</h1>
      <p>Consultants</p>
    </div>
    <div class="deat" id="deat-3">
      <h1>12</h1>
      <p>Awards</p>
    </div>
    <div class="deat" id="deat-4">
      <h1>160</h1>
      <p>Employees</p>
    </div>
  </div>
</div>
<div class="clients">
  <a
    ><img
      src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-9-270x117.png"
      alt="mittos"
  /></a>
  <a
    ><img
      src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-10-270x117.png"
      alt="mittos"
  /></a>
  <a
    ><img
      src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-3-270x117.png"
      alt="mittos"
  /></a>
  <a
    ><img
      src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-11-270x117.png"
      alt="mittos"
  /></a>
</div>

在框中对齐文本中心。修改CSS只是为了让文本位于中心

@介质（最小宽度：768px）{
.货柜-1{
显示器：flex；
/*调整项目：灵活启动*/
/*对齐项目：柔性端*/
/*对齐项目：居中*/
/*弯曲方向：柱*/
}
.货柜-2{
显示器：flex；
/*调整内容：灵活启动*/
/*证明内容：柔性端*/
/*证明内容：中心*/
证明内容：之间的空间；
/*证明内容：周围的空间*/
/*调整内容：柔性中心*/
}
}
.货柜-3{
显示器：flex；
柔性包装：包装；
}
.container-1分区、.container-2分区、.container-3分区{
边框：1px#ccc实心；
填充：10px；
文本对齐：居中；
}
.框-1{
弹性：2；
顺序：1；
}
.方框-2{
弹性：1；
顺序：3；
}
.方框-3{
弹性：1；
命令2；
}
.集装箱-2箱{
/*宽度：27%*/
flex bassi:27%
}
.3号货柜{
/*宽度：27%*/
弹性基准：15%
}


方框一
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职
方框二
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职
方框三
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职
方框四
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职
方框五
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职
方框六
Lorem ipum dolor sit amet，阿迪斯皮斯精英圣座
方框七
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职
方框八
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职
方框九
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职
方框十
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职
包厢11
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职
箱形花呢
Lorem ipsum dolor sit amet，阿迪斯皮斯精英圣职

尝试

文本对齐：居中尝试过，但不起作用。我想垂直居中我的文本尝试添加一些填充
* {
  margin: 0;
}
.container {
  margin: 5rem 10rem 2rem;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.ten-img {
  font-size: 140px;
}

.yrs-exp {
  margin: 1rem;
  font-size: large;
  flex-basis: 20%;
  text-align: start;
}

.yrs-exp p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.deats-cont {
  display: flex;
  flex-wrap: wrap;
}

.deat {
  flex-basis: 49%;
  min-height: 100px;
}

#deat-1 {
  border-right: solid 1px black;
}

#deat-2 {
  border-bottom: solid 1px black;
}

#deat-3 {
  border-top: solid 1px black;
}

#deat-4 {
  border-left: solid 1px black;
}

.clients {
  margin: 1rem 10rem;
  display: flex;
  justify-content: space-between;
}

.clients img {
  border: solid 1px black;
}

enter code here