首页使用htlm ,有6个文本,两两为一行分为两列三行,每行每列均对齐，文本整体居中，居中后第一列与第二列相距10px，第一列缩进200px

使用htlm ,有6个文本,两两为一行分为两列三行,每行每列均对齐，文本整体居中，居中后第一列与第二列相距10px，第一列缩进200px

时间: 2024-03-10 07:50:32 浏览: 70

html文本上下左右居中

您可以使用以下的 HTML 代码实现您的需求： ```html <!DOCTYPE html> <html> <head> <title>文本排列</title> <style type="text/css"> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto; max-width: 800px; } .col { flex: 1; padding: 10px; text-align: justify; } .col:first-child { padding-left: 200px; margin-right: 10px; } </style> </head> <body> <div class="container"> <div class="col"> <p>文本1</p> <p>文本2</p> </div> <div class="col"> <p>文本3</p> <p>文本4</p> </div> <div class="col"> <p>文本5</p> <p>文本6</p> </div> </div> </body> </html> ``` 这段代码使用了 flex 布局来实现文本的对齐和居中。首先，我们用一个容器来包含所有文本，然后将容器的 display 属性设置为 flex，这样子元素就可以进行弹性布局了。紧接着，我们使用 flex-wrap 属性将元素换行，并使用 justify-content 和 align-items 属性将元素水平和垂直居中。接下来，我们将每个文本块设置为 flex: 1，这样每个文本块的宽度就会平分容器的宽度。同时，我们给每个文本块设置了 padding 和 text-align 属性，使得文本可以对齐，并且添加了一个 margin-right 属性来让第一列与第二列相距 10px。对于第一列，我们使用了 :first-child 伪类来选中第一个元素，并设置了 padding-left 属性来让它缩进 200px。最后，我们将容器的最大宽度设置为 800px，并使用 margin 属性将其水平居中。

阅读全文