无法垂直对齐标签和按钮

Question

Please excuse me if the question may sound silly, hoping that it will be helpful to someone else.

I'm trying to have my buttons well aligned with a given label. Unfortunately, I am quite not very successful, since despite the same height and padding values, the various elements are not aligned on the vertical plane as I would like them to be.

What I basically did is to copy the CSS bits that I have for my label .resizedTextbox and pasted them in those of my buttons button .

Does any one have the same issue or what am I missing here?

 .resizedTextbox { width: 40px; height: 20px; padding: 5px 5px 5px 5px; border-color: #3e12cc; text-shadow: 0px 1px 1px #154682; background-color: #f5effb; vertical-align: text-top; text-align: center; font-size: 18px; } .button { border-radius: 3px; background-color: blue; border: none; color: white; padding: 5px 5px 5px 5px; text-align: center; text-decoration: none; cursor: pointer; width: 80px; height: 20px; letter-spacing: 2px; font-size: 18px; } 

 <div id="section"> <h2>Trying to align buttons and label</h2> <div id="home_automation_tab"> <p></p> <td class="tablerows"><input id="lab91" type="text" name="country" class="resizedTextbox" value="0" readonly> <button class="button">Off</button> <button class="button">30%</button> <button class="button">50%</button> <button class="button">80%</button> <button class="button">On</button> </div> </div> 

Answer 1

Try to use Flexbox

Also no need to write padding: 5px 5px 5px 5px ...just use padding: 5px if values for top, right, bottom, left are same.

And also remove <td class="tablerows"> from your code..no need here

 #home_automation_tab { display: flex; } .resizedTextbox { width: 40px; padding: 5px; border-color: #3e12cc; text-shadow: 0px 1px 1px #154682; background-color: #f5effb; text-align: center; font-size: 18px; } .button { border-radius: 3px; background-color: blue; border: none; color: white; padding: 5px; text-align: center; cursor: pointer; width: 80px; letter-spacing: 2px; font-size: 18px; margin-left: 5px; } 

 <div id="section"> <h2>Trying to align buttons and label</h2> <div id="home_automation_tab"> <p></p> <input id="lab91" type="text" name="country" class="resizedTextbox" value="0" readonly> <button class="button">Off</button> <button class="button">30%</button> <button class="button">50%</button> <button class="button">80%</button> <button class="button">On</button> </div> </div> 

---

Also your code is working fine as it written..you will need to use box-sizing: border-box for both button and label and try to change the value of height so that the content get visible

 .resizedTextbox { width: 40px; height: 30px; padding: 5px; border-color: #3e12cc; text-shadow: 0px 1px 1px #154682; background-color: #f5effb; vertical-align: top; text-align: center; font-size: 18px; box-sizing: border-box; } .button { border-radius: 3px; background-color: blue; border: none; color: white; padding: 5px; text-align: center; text-decoration: none; cursor: pointer; width: 80px; height: 30px; letter-spacing: 2px; font-size: 18px; box-sizing: border-box; } 

 <div id="section"> <h2>Trying to align buttons and label</h2> <div id="home_automation_tab"> <p></p> <input id="lab91" type="text" name="country" class="resizedTextbox" value="0" readonly> <button class="button">Off</button> <button class="button">30%</button> <button class="button">50%</button> <button class="button">80%</button> <button class="button">On</button> </div> </div> 

Answer 2

There are multiple ways to solve this problem. The flexbox answer above by Bhuwan is probably the best way to go.

If you are stuck with the HTML structure and just wanted a css solution, do the following:

• Be sure to copy vertical-align:text-top to both css classes
• Add box-sizing: border-box to each (I used the wildcard selector below, but you can just add it to each).
• And set the height exactly. You previously were relying on the border, plus padding, plus font-size, etc to set the height of each element.
• You may also have to revisit the width of your label at this point but here you have complete pixel control over the height and width of each element.

 * { box-sizing: border-box; } .resizedTextbox { width: 40px; height: 40px; padding: 5px; border-color:#3e12cc; text-shadow:0px 1px 1px #154682; background-color:#f5effb; vertical-align:text-top; text-align:center; font-size:18px; } .button { border-radius:3px; background-color: blue; border: none; color: white; padding: 5px; text-align: center; text-decoration: none; cursor: pointer; width: 80px; height: 40px; letter-spacing: 2px; font-size:18px; vertical-align:text-top; } 

  <div id="section"> <h2>Trying to align buttons and label</h2> <div id="home_automation_tab"> <p></p> <td class="tablerows"> <input id="lab91" type="text" name="country" class="resizedTextbox" value="0" readonly> <button class="button">Off</button> <button class="button">30%</button> <button class="button">50%</button> <button class="button">80%</button> <button class="button">On</button> </td> </div> </div>