Question

button, a {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
}

button > div, a > div {
  width: 30px;
  height: 10px;
  background-color: red;
}

<button>
  <div class="buttonDiv"></div>
</button>

<a href="#">
  <div class="anchorDiv"></div>
</a>

我们项目中的按钮带有图标，根据道具呈现为按钮或锚点。我们偶然发现了按钮内容错位的问题。在代码片段中有示例。

为什么内部div在按钮和锚点中的位置不同？如何正确对齐按钮内容？我本来可以添加padding-top，但这似乎不对。

Answer 1

我担心您没有自然预期行为的原因是，在div内包含button的HTML无效（根据HTML5）。这意味着每个浏览器可能有不同的呈现方式。

正如您所说，您可以轻松地使用填充或定位来使其按预期工作，但它仍然不是有效的HTML。一种可能的解决方法是在锚标记上重置填充（以覆盖默认样式）和垂直居中内容（不依赖于元素本身的高度）。 https://jsfiddle.net/ne037nL7/

该按钮只能包含短语内容，其中不仅包括纯文本，还包括span，i等（此处为完整列表https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content）。

资料来源：W3 https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element

Answer 2

试试这段代码。

  <style>
            .main{
        display:table;
        }
            button, a {
              height: 30px;
              display: table-cell;
              border: 1px solid black;
              vertical-align: middle;
              padding:0 10px;
            }
            button {
              background: transparent;
              height: 32px;
              margin-right: 10px;
            }

            button > div, a > div {
              width: 30px;
              height: 10px;
              background-color: red;
            }
            </style>
          <div class="main">
            <button>
              <div class="buttonDiv"></div>
            </button>

            <a href="#">
              <div class="anchorDiv"></div>
            </a>
        </div>

Answer 3

试试这个

a{
display:table-cell ;
}

button, a {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
}
a{
display:table-cell ;
padding:0.5px 6px;
}
button > div, a > div {
  width: 30px;
  height: 10px;
  background-color: red;
}

<button>
  <div class="buttonDiv"></div>
</button>

<a href="#">
  <div class="anchorDiv"></div>
</a>

Answer 4

button {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
  float:left;
}

a {
  height: 30px;
  border: 1px solid black;
  vertical-align: middle;
  display: table-cell;
}

button > div {
  width: 30px;
  height: 10px;
  background-color: red;
}


a > div {
  width: 30px;
  height: 10px;
  background-color: red;
  vertical-align:middle;
}

<button>
  <div class="buttonDiv"></div>
</button>

<a href="#">
  <div class="anchorDiv"></div>
</a>

锚和按钮内的垂直定位

4 个答案: