內錨和按鈕

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>