Как я могу центрировать эти 4 кнопки на этой HTML-странице?

Question

<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 1" и "Hello 2", слева от "Hello 3" и "Hello 4".Если это возможно, без CSS, но только с HTML (тэг style хорош, если это необходимо).

Answer 1

Базовое решение, использующее минимальный 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 используется только для центрирования элемента на странице.

Answer 2

Вот исправление:

<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/

Answer 3

Использовать выравнивание текста: по центру родительского div -

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