时间戳

首页 > 解决方案 > 如何在 flexbox 容器中居中此文本？

css - 如何在 flexbox 容器中居中此文本？

问题描述

我正在做一个小组项目，我们试图复制这个网站，我被分配了这个部分：在此处输入图像描述

我用 flexbox 布置了所有内容，但由于某种原因，无法使右侧部分的文本居中。这是我到目前为止所得到的：在此处输入图像描述

我尝试使用justify-content: center，align-items: center但文本没有任何反应。如何对齐中心的所有内容？

这是我在 codepen 中的所有代码：https ://codepen.io/caseycling/pen/VwmExMY

这是我的 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：

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

标签： cssflexbox

解决方案

在框中对齐文本中心。仅修改 CSS 以使文本居中

@media(min-width: 768px) {
  .container-1 {
  display: flex;
/*   align-items: flex-start; */
/*   align-items: flex-end; */
/*   align-items: center; */
/*   flex-direction: column */
  
}

.container-2 {
  display: flex;
/*   justify-content: flex-start; */
/*   justify-content: flex-end; */
/*   justify-content: center; */
  justify-content: space-between;
/*   justify-content: space-around; */
  
  
  
  
/*   justify-content: flex-center; */
}
}

.container-3 {
  display: flex;
  flex-wrap: wrap;
}


.container-1 div, .container-2 div, .container-3 div{
  border: 1px #ccc solid;
  padding: 10px;
 text-align: center;
}

.box-1 {
  flex: 2;
    order: 1; 
}

.box-2 {
  flex: 1;
    order: 3;
}

.box-3 {
  flex: 1;
    order 2;
}

.container-2-box {
/*   width: 27%; */
  flex-bassi: 27%
}
.container-3-box {
/*   width: 27%; */
  flex-basis: 15%
}
<div class='container-1'>
  <div class='box-1'> 
    <h3> Box One </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div>
  <div class='box-2'> 
    <h3> Box Two </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div>
  <div class='box-3'> 
    <h3> Box Three </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div>
</div>

<div class='container-2'>
  <div class='container-2-box'> 
    <h3> Box Four </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div>
  <div class='container-2-box'> 
    <h3> Box Five </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div>
  <div class='container-2-box'> 
    <h3> Box Six </h3>
    <p> Lorem ipum dolor sit amet, consectuture        adispisi elit. </p>
  </div>
  
</div>

<div class='container-3'>
  <div class='container-3-box'> 
    <h3> Box Seven </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div>
  <div class='container-3-box'> 
    <h3> Box Eight </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div>
  <div class='container-3-box'> 
    <h3> Box Nine </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div><div class='container-3-box'> 
    <h3> Box Ten </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div><div class='container-3-box'> 
    <h3> Box Eleven </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div><div class='container-3-box'> 
    <h3> Box Tweleve </h3>
    <p> Lorem ipsum dolor sit amet, consectuture        adispisi elit. </p>
  </div>
  
</div>

推荐阅读