Question

在将按钮设置为display: block之后，我无法将按钮居中。我有一张桌子：

<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

您将使用document.getElementById("contacts").style.display = "table";

Answer 2

首先，请勿使用表格结构进行格式化。表有其位置，但将它们用作HTML支架是1990年。相反，应将DIV与CSS一起使用。

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

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

那么，如何确定所有这些东西的大小/位置？使用CSS。

在CSS中，从Bootstrap3到Bootstrap4的最重要的更改是从浮动到Flexbox的原因是有原因的。浮动广告是放置商品的旧方法； flexbox（和CSSGrid）是新方法。 Flexbox已失效 easy 。

Flexbox需要做两件事：

父容器（例如DIV，剖面，侧面，p等）
一个或多个子元素（例如div，p，img等）

Here is an excellent 5min video tutorial

Here is a great cheatsheet

Answer 3

在此示例中，您还可以为其指定一个“ align-content-center”类

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

然后在按钮周围设置div样式

.align-content-center{
  width: 100%;
  text-align: center;
}

Answer 4

您应该使用 visibility 属性而不是显示，因为显示不仅影响可见性，还影响其他内容。

要隐藏它，请使用：

document.getElementById("contacts").visibility.display = "hidden";

再次显示：

document.getElementById("contacts").visibility.display = "visible";

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

4 个答案: