如何在这个 HTML 页面中居中这 4 个按钮？

Posted 2023-03-29

【中文标题】如何在这个 HTML 页面中居中这 4 个按钮？

【英文标题】：How can I center this 4 buttons in this HTML page?

【发布时间】：2018-11-03 22:48:18

【问题描述】：

<div style="float: left; width: 50%;">
    <a href="#" class="button" style="width:40%">Hello 1</a>
    <br/>
    <br/>
    <a href="#" class="button" style="width:40%">Hello 2</a>
</div>
<div style="float: right; width: 50%;">
    <a href="#" class="button" style="width:40%">Hello 3</a>
    <br/>
    <br/>
    <a href="#" class="button" style="width:40%">Hello 4</a>
</div>

我想在“Hello 3”和“Hello 4”的左边有“Hello 1”和“Hello 2”。如果可能的话，没有 CSS，但只有 html（如果需要，样式标签很好）。

【问题讨论】：

style="..." 中的内容是 CSS。

【参考方案1】：

这里是修复：

<div style="float: left; width: 50%;" align="center">
    <a href="#" class="button" style="width:40%">Hello 1</a>
    <br/>
    <br/>
    <a href="#" class="button" style="width:40%">Hello 2</a>
</div>
<div style="float: right; width: 50%;"  align="center">
    <a href="#" class="button" style="width:40%">Hello 3</a>
    <br/>
    <br/>
    <a href="#" class="button" style="width:40%">Hello 4</a>

你可以在这里查看https://codebeautify.org/htmlviewer/

【参考方案2】：

使用 text-align: 在父 div 上居中 -

<div style="float: left; width: 50%;text-align:center">

【参考方案3】：

使用最少的 CSS（只有一种样式）且更清晰易懂的基本解决方案。

<table style="margin: 0px auto;">
  <tr>
    <td><a href="#" class="button">Hello 1</a></td>
    <td><a href="#" class="button">Hello 3</a></td>
  </tr>
  <tr>
    <td><a href="#" class="button">Hello 2</a></td>
    <td><a href="#" class="button">Hello 4</a></td>
  </tr>
</table>

在此解决方案中，CSS 部分仅用于在页面上居中元素。