内锚和按钮

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>

我们有我们的项目呈现为按钮或锚根据道具的图标按钮垂直定位。我们偶然发现了按钮内容未对齐的问题。在代码片段中有例子。

为什么inner div在button和anchor中的排列方式不同？如何正确对齐按钮的内容？我可以刚刚添加padding-top，但它似乎不正确。

Answer 1

我怕你没有一个自然的预期行为的原因是，它不是有效的HTML（按照HTML5），包括div里面的button。这意味着每个浏览器可能有不同的渲染方式。如你所说，你可以做一个解决方法，使用填充或定位以使其按照你的意愿工作，但它仍然不会是有效的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

试试这个

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 3

试试这个代码。

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