如何对齐文本框HTML，CSS

Question

文字正在走下楼梯。这是代码。我看过很多帖子，但显然没有一个对我有用。对代码不熟悉所以会感谢一些帮助。想要将它对齐在水平线上。

    <div class="text">
    <p class="text1">We strive to produce the most highest grade of product 
      possible. Efficiency is our key, with the support of our team and our fast 
      response team, we can meet every demand.</p>
    <p class="text2">We strive to produce the most highest grade of product 
     possible. Efficiency is our key, with the support of our team and our fast 
     response team, we can meet every demand.</p>
    <p class="text3">We strive to produce the most highest grade of product 
     possible. Efficiency is our key, with the support of our team and our fast 
     response team, we can meet every demand.</p>
    </div>

p.text1 {
 color: white;
 margin-right: 1250px;
 margin-left: 40px;
 text-align:center;
 font-size:20px;
}

p.text2 {
 color: white;
 margin-right: 600px;
 margin-left: 600px;
 text-align:center;
 font-size:20px;
}

p.text3 {
 color: white;
 margin-right: 20px;
 margin-left: 1200px;
 text-align:center;
 font-size:20px;
}

Answer 1

  

你可以帮助display: table-cell财产。

＆＃13;

＆＃13;

.text1,.text2,.text3 {
  display: table-cell;
  padding: 0px 10px;
  color: #000;
  font-size: 20px;
}  

＆＃13;

<div class="text">
    <p class="text1">We strive to produce the most highest grade of product 
      possible. Efficiency is our key, with the support of our team and our fast 
      response team, we can meet every demand.</p>
    <p class="text2">We strive to produce the most highest grade of product 
     possible. Efficiency is our key, with the support of our team and our fast 
     response team, we can meet every demand.</p>
    <p class="text3">We strive to produce the most highest grade of product 
     possible. Efficiency is our key, with the support of our team and our fast 
     response team, we can meet every demand.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

flexbox解决方案

＆＃13;

＆＃13;

.text {
  display: flex;
  font-size: 20px;
  width: 100%;
  justify-content: space-around;
}

.text p {
  width: 30%;
  color: white;
}

.text1 {
  background-color: red;
}

.text2 {
  background-color: green;
}

.text3 {
  background-color: purple;
}

＆＃13;

<div class="text">
  <p class="text1">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p>
  <p class="text2">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p>
  <p class="text3">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

设置父级的显示和对齐属性，它将为您提供所需的输出

.text{
    justify-content: space-around;
    display: flex;
  }
.text1 {
 color: black;
 width: 30%;
 text-align:center;
 font-size:20px;
}

.text2 {
 color: black;
 width: 30%;
 text-align:center;
 font-size:20px;
}

.text3 {
 color: black;
 width: 30%;
 text-align:center;
 font-size:20px;
}

<div class="text">
    <p class="text1">We strive to produce the most highest grade of product 
      possible. Efficiency is our key, with the support of our team and our fast 
      response team, we can meet every demand.</p>
    <p class="text2">We strive to produce the most highest grade of product 
     possible. Efficiency is our key, with the support of our team and our fast 
     response team, we can meet every demand.</p>
    <p class="text3">We strive to produce the most highest grade of product 
     possible. Efficiency is our key, with the support of our team and our fast 
     response team, we can meet every demand.</p>
  </div>

Answer 4

有很多方法可以解决您的问题，但我建议您使用＆＃34; flex＆＃34;。您只需要在＆＃34; flex＆＃34;上设置容器的显示属性，定义flex项目放置在flex容器中的flex方向和＆＃34; justify-content＆＃34;定义沿主轴的对齐。

＆＃13;

＆＃13;

.text {
  display: flex;
  flex-direction: "column";
  justify-content: "space-around";
}

p {
  margin: 10px;
  text-align: center;
  font-size: 20px;
}

p.text1 {
  background: #bbb;
}

p.text2 {
  background: #888;
}

p.text3 {
  background: #555
}

＆＃13;

<div class="text">
  <p class="text1">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p>
  <p class="text2">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p>
  <p class="text3">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

＆＃13;

＆＃13;

.text1 {
  float: left;
  width: 33%;
  background-color: red;
}

.text2 {
  float: left;
  width: 33%;
  background-color: green;
}

.text3 {
  float: left;
  width: 33%;
  background-color: purple;
}

＆＃13;

<div class="text">
    <div class="text1">We strive to produce the most highest grade of product 
      possible. Efficiency is our key, with the support of our team and our fast 
      response team, we can meet every demand.</div>
    <div class="text2">We strive to produce the most highest grade of product 
     possible. Efficiency is our key, with the support of our team and our fast 
     response team, we can meet every demand.</div>
    <div class="text3">We strive to produce the most highest grade of product 
     possible. Efficiency is our key, with the support of our team and our fast 
     response team, we can meet every demand.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

以上代码段应该有用，只是一个例子。您可以自己为课程添加更多css并删除背景：）。

还有另一种方法可以做到，但不是supported by older browsers:

＆＃13;

＆＃13;

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}

＆＃13;

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

＆＃13;

＆＃13;

＆＃13;