Question

我在单个标签上使用边距将它们居中对齐并直接放在按钮下方。这在不同的屏幕尺寸上是hacky和不一致的。

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

如何在按钮下方放置标签并始终水平对齐两个？

1 个答案: