javascript - 更改显示模式后的中心按钮

Question

将按钮设置为 display: block 后，我无法将按钮居中。我有一张 table :

<table border="0" id="contacts" width="100%">
    <tr><td><div align="center"><button style="width:200px;">btn1</button></div></td></tr>
    <tr><td><div align="center"><button style="width:200px;">btn1</button></div></td></tr>
</table>

两个按钮都位于表格的中央。现在我切换可见性:

document.getElementById("contacts").style.display = "none";

表格和按钮是不可见的。在我切换可见性后:

document.getElementById("contacts").style.display = "block";

按钮向左对齐。如何让按钮再次居中？

Answer 1

首先，不要使用表格结构进行格式化。表格有它们的位置，但是将它们用作 HTML 脚手架已经是 1990 年了。相反，使用带有 css 的 DIV。

将您的页面分成几个外框或容器。 (为此，您可以使用 DIV - 您可以将 DIV 用于几乎所有容器 - 或部分或其他容器元素，具体取决于您对额外 SEO 信誉的需要。)

然后在每个外部容器 (div) 中分割为所需的布局类型(再次使用 div)。然后，在每个子区域内，再次使用 div(或其他容器元素)进行任何进一步的分割。

那么，如何调整/定位所有这些东西？使用 CSS。

在 css 中，从 Bootstrap3 到 Bootstrap4 最重要的变化是从 float 到 flexbox 是有原因的。 float 是放置元素的旧方法； flexbox(和 CSSGrid)是新的方式。 Flexbox 非常简单。

Flexbox 需要两件事:

1. 父容器(例如 DIV、section、aside、p 等)

2. 一个或多个子元素(例如div、p、img等)

Here is an excellent 5min video tutorial

Here is a great cheatsheet