ボタンの下にラベルを配置し、水平方向に一貫して並べる方法は？

Question

私は個々のラベルにマージンを使用して、ボタンを中央に合わせてボタンのすぐ下に配置しています。これは、画面のサイズが異なるとハッキーで矛盾します。

<div id="langButtons"> 
    <input class="btn-group langButton" id="useJavascript" value="JavaScript" type="button"></input> 
    <input class="btn-group langButton" id="useRuby" value="Ruby" type="button"></input> 
    <input class="btn-group langButton" id="usePython" value="Python" type="button"></input> 
    <input class="btn-group langButton" id="useHTML" value="HTML" type="button"></input> 
    <input class="btn-group langButton" id="useCSS" value="CSS" type="button"></input> 
    <input class="btn-group langButton" id="useSwift" value="Swift" type="button"></input> 
</div> 

<div id="langDescriptions"> 
    <label style="margin-left: 4.8%" class="langDescription" id="JavaScript">Javascript</label> 
    <label style="margin-left: 6.8%" class="langDescription" id="Ruby">Ruby</label> 
    <label style="margin-left: 4.5%" class="langDescription" id="Python">Python</label> 
    <label style="margin-left: 5.4%" class="langDescription" id="HTML">HTML</label> 
    <label style="margin-left: 5.3%" class="langDescription" id="CSS">CSS</label> 
    <label style="margin-left: 4.8%" class="langDescription" id="Swift">Swift</label> 
</div> 

もっと良い方法が必要ですか？

Answer 1

だけtext-align: centerもinputタグで親要素に入れ、自己閉鎖されている - あなたはここで</input>

を必要としない私が何を意味するかの例です： https://jsfiddle.net/ajc8pqh9/

.grouping{ 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.langDescription{ 
 
    display: block; 
 
}

<div id="langButtons"> 
 
<div class="grouping"> 
 
    <input class="btn-group langButton" id="useJavascript" value="JavaScript" type="button"> 
 
    <label for="useJavascript" class="langDescription" id="JavaScript">Javascript</label> 
 
</div> 
 
<div class="grouping"> 
 
    <input class="btn-group langButton" id="useRuby" value="Ruby" type="button"> 
 
    <label class="langDescription" id="Ruby">Ruby</label> 
 
</div> 
 
<div class="grouping"> 
 
    <input class="btn-group langButton" id="usePython" value="Python" type="button"> 
 
    <label class="langDescription" id="Python">Python</label> 
 
</div> 
 
<div class="grouping"> 
 
    <input class="btn-group langButton" id="useHTML" value="HTML" type="button"> 
 
    <label class="langDescription" id="HTML">HTML</label> 
 
</div> 
 
<div class="grouping"> 
 
    <input class="btn-group langButton" id="useCSS" value="CSS" type="button"> 
 
    <label class="langDescription" id="CSS">CSS</label> 
 
</div> 
 
<div class="grouping"> 
 
    <input class="btn-group langButton" id="useSwift" value="Swift" type="button"> 
 
    <label class="langDescription" id="Swift">Swift</label> 
 
</div> 
 
</div>