如何将内容与 html 页面的中心对齐

我有以下html代码

<body>
<h3>Title 1</h3>
<h3>Title 2</h3>
<div>
<a href="ref1">
<button type="button">Button 1</button>
</a>
<span> abcd </span>
<a href="ref2">
<button type="button">Button 2</button>
</a>
</div>
<div>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
</tr>
</table>
</div>
</body>

我想在下面添加 css 以以下格式居中对齐页面

title 1
title 2
button1  abcd  button2
+----------------------------+
|   col1 |   col2  |  col3   |
+----------------------------+
|   val1 |   val2  |  val3   |
+----------------------------+

表格和标题应位于页面中心。带有按扣的 2 个按钮应该居中对齐。我怎样才能做到这一点？

将以下样式应用于正文标签显示：柔性; 理由内容：中心;

将以下样式添加到 html 顶部的正文标记中。

<body style="text-align: center; display: grid; justify-content:center;">

<body>
<center>
<h3>Title 1</h3>
<h3>Title 2</h3>
<div >
<a href="ref1">
<button type="button" >Button 1</button>
</a>
<span> abcd </span>
<a href="ref2">
<button type="button" >Button 2</button>
</a>
</div>
<div >
<table >
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
</tr>
</table>
</div>
</center>
</body>

使用 HTMLcenter标签将身体的整个内容与中心对齐。

为此使用 CSS GRID 为什么你使用表格？

相关内容

最新更新

热门标签：