如何将标签放置在按钮下方并使两者水平对齐？

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>

一定有更好的方式吧？

- Cow Pow Pow

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>

- Pat