Cow Pow Pow Cow Pow Pow - 2 months ago 14
CSS Question

How to place labels below buttons and consistently align the two horizontally?

I'm using margins on individual labels to align them centred and directly below buttons. This is hacky and inconsistent on different screen sizes.

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


There must be a better way?

Pat Pat
Answer

Just put them in a parent element with text-align: center also input tags are self closing -- you don't need </input>

Here is an example of what I mean: 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>

Comments