如何对齐文本框HTML、CSS

文本以一种楼梯的方式向下移动。这是代码。我看过很多帖子，但显然没有一篇适合我。新的代码，所以会感谢一些帮助。想要在水平线上对齐它

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

我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求
我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求
我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求
p、 文本1{
颜色：白色；
右边距：1250px；
左边距：40px；
文本对齐：居中；
字体大小：20px；
}
p、 文本2{
颜色：白色；
右边距：600px；
左边距：600px；
文本对齐：居中；
字体大小：20px；
}
p、 文本3{
颜色：白色；
右边距：20px；
左边距：1200像素；
文本对齐：居中；
字体大小：20px；
}

.text1{
浮动：左；
宽度：33%；
背景色：红色；
}
.text2{
浮动：左；
宽度：33%；
背景颜色：绿色；
}
.text3{
浮动：左；
宽度：33%；
背景颜色：紫色；
}

我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求。
我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求。
我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求。

您可以使用

display:table cell

属性的帮助

.text1、.text2、.text3{
显示：表格单元格；
填充：0px 10px；
颜色：#000；
字体大小：20px；
}

我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求
我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求
我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求

flexbox解决方案

.text{
显示器：flex；
字体大小：20px；
宽度：100%；
证明内容：周围的空间；
}
.文本p{
宽度：30%；
颜色：白色；
}
.text1{
背景色：红色；
}
.text2{
背景颜色：绿色；
}
.text3{
背景颜色：紫色；
}

我们努力生产尽可能最高等级的产品。效率是我们的关键，在我们团队和快速响应团队的支持下，我们可以满足每一个需求
我们努力生产尽可能最高等级的产品。效率是我们的关键，在我们团队和快速响应团队的支持下，我们可以满足每一个需求
我们努力生产尽可能最高等级的产品。效率是我们的关键，在我们团队和快速响应团队的支持下，我们可以满足每一个需求

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

.text{
证明内容：周围的空间；
显示器：flex；
}
.text1{
颜色：黑色；
宽度：30%；
文本对齐：居中；
字体大小：20px；
}
.text2{
颜色：黑色；
宽度：30%；
文本对齐：居中；
字体大小：20px；
}
.text3{
颜色：黑色；
宽度：30%；
文本对齐：居中；
字体大小：20px；
}

我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求
我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求
我们努力生产最优质的产品
可能的在我们团队和fast的支持下，效率是我们的关键
响应团队，我们可以满足每一个需求

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

.text{
显示器：flex；
伸缩方向：“列”；
为内容辩护：“周围的空间”；
}
p{
利润率：10px；
文本对齐：居中；
字体大小：20px；
}
p、 文本1{
背景:#bbb ;；
}
p、 文本2{
背景：#888；
}
p、 文本3{
背景：#555
}

我们努力生产尽可能最高等级的产品。效率是我们的关键，在我们团队和快速响应团队的支持下，我们可以满足每一个需求
我们努力生产尽可能最高等级的产品。效率是我们的关键，在我们团队和快速响应团队的支持下，我们可以满足每一个需求
我们努力生产尽可能最高等级的产品。效率是我们的关键，在我们团队和快速响应团队的支持下，我们可以满足每一个需求

现在是2017年。不要使用浮动。这就是为什么有第二个建议