如何在帶有標籤的輸入框下居中文本？

聽起來很簡單，但說我使用引導程序和輸入框有一個標籤，當我調整下面的文本不居中。如何在帶有標籤的輸入框下居中文本？

下面是一些簡單的HTML來演示：

<form action="http://google.com"> 
     <div> 
      <label for="inputBox">Email address</label> 
      <input name="email" type="text" id="inputBox"/> 
      <br> 
      (Center under input) 
     </div> 
    </form>

的標籤應當以輸入文本框，（下輸入中心）文本」在中間的輸入框下會出現有關。

因此理想情況下（輸入中心）文本應該粘貼在輸入文本框下方，而標籤正常工作。

這可能嗎？我現在試着用一張桌子（所有的東西），但不能讓它表現出來，我試過定位等等，但仍然沒有運氣。

任何幫助，非常感謝。

來源

2015-12-22 IanMcRV

您可能需要更改HTML ...是一個選項嗎？ –

@Paulie_D它可能會改變html位 – IanMcRV

如果你想將事物相對中心，那麼他們通常應該放在一個容器中。

div, 
 
label { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
div { 
 
    text-align: center; 
 
}

<form action="http://google.com"> 
 
    <div> 
 
    <label for="inputBox">Email address</label> 
 

 
    <div> 
 
     <input name="email" type="text" id="inputBox" /> 
 
     <br>(Center under input) 
 
    </div> 
 
    </div> 
 
</form>

你舉的例子內容過於抽象說，但你的心的內容也許應該是另一個標籤元素，則將其與輸入相關聯。

來源

2015-12-22 15:55:34 Quentin

啊另一個標籤元素，沒有想到的！我會玩一玩，看看我能否讓它行動。謝謝 – IanMcRV

你可以殺死2個一箭雙鵰 - 可訪問的輸入是與屏幕閱讀器兼容，並居中的文字，使用這種標記結構：

label { 
 
    max-width:300px; 
 
    display:block; 
 
} 
 

 
label span { 
 
    text-align:left; 
 
    display:block; 
 
} 
 
label input { 
 
    width:100%; 
 
}

<form action="http://google.com"> 
 
    <label> 
 
     <span>Email address</span> 
 
     <input name="email" type="text" id="inputBox"/> 
 
     <span style="text-align:center">center me</span> 
 
    </label> 
 
</form>

通知你不不需要for屬性。這是一種乾淨的方式來實現可訪問性。一些簡單的CSS對齊文本。如果你不想使用內聯樣式，你總是可以編寫另一個類。

來源

2015-12-22 16:35:30 inorganik

這很有趣，我會嘗試一下，謝謝！ – IanMcRV

如何在帶有標籤的輸入框下居中文本？

回答

相關問題