ボタンのテキストを垂直に完全に配置するにはどうすればよいですか？

Question

おはよう、

下の図に示すように、上向き矢印と下向き矢印の2つのボタンがあります。

次され、対応するHTMLコード：

[...] 

<tr> 
    <td class="tablerows" height="40">lab01 - Temp&#233;rat. pi&#232;ce [T1]</td> 
    <td class="tablerows"><input id="lab01" type="text" name="country" class="resizedTextbox" value="20" readonly> 
    <a href="#" class="myButton" onclick="TemperatureControl('lab01','decrease')"><i class="fa fa-chevron-down"></i></a> 
    <a href="#" class="myButton" onclick="TemperatureControl('lab01','increase')"><i class="fa fa-chevron-up"></i></a> 
</td> 
</tr> 

[...] 

編集、あなたの助けに感謝。私は

リンクCSSは次のようであるたいと思いますしかし、私は、まだ私のすべての要素を整列させることはできませんよ。

td{ 
    vertical-align:middle; 
} 
.myButton { 
    -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7; 
    box-shadow:inset 0px 1px 0px 0px #54a3f7; 
    background-color:#3e12cc; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    border-radius:3px; 

    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:Arial; 
    font-size:18px; 
    padding: 0 10px 10px 10px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #154682; 
    width:20px; 
    height:25px; 
    vertical-align:-1px; 
    line-height:auto; 
} 
.myButton:hover { 
    background-color:#0061a7; 
} 
.myButton:active { 
    position:relative; 
    top:1px; 
} 
.resizedTextbox {width: 50px; 
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; 
} 
progress { 
    background-color: #0061a7; 
    border: 0; 
    height: 18px; 
    border-radius: 9px; 
} 

私は基本的にやろうとしていますどのような「良い」を持つことです（私の例では、それがあまり整列していないことがわかります）。

あなたを苛立たさせ、ネガティブなdownvoteを危険にさらす前に、私は私の問題をGoogleに挑戦しようとしましたが、私が持っている問題を見つけることができませんでした。私は不動産を逃したのですか、それとも間違って設定しましたか？あなたのヒントのための

おかげ

Answer 1

を追加しました。今後も簡単にコードを共有してください。

Answer 2

はあなたがvertical-align:middleが必要.myButton

line-height:25px; 

Answer 3

のための行の高さを追加します。試してみてください、それ以外の場合は、padding-top:をsepareteの上から追加できます。私は

vertical-align:-6px; 

それが動作するはずこれを試してみてくださいでそれを揃えることができた

Answer 4

使用このCSS、取り出し高さと幅とbox-sizing

box-sizing: border-box; 
    padding:10px; 

.myButton { 
 
    -moz-box-shadow: inset 0px 1px 0px 0px #54a3f7; 
 
    -webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7; 
 
    box-shadow: inset 0px 1px 0px 0px #54a3f7; 
 
    background-color: #3e12cc; 
 
    -moz-border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    color: #ffffff; 
 
    font-family: Arial; 
 
    font-size: 18px; 
 
    text-decoration: none; 
 
    text-shadow: 0px 1px 0px #154682; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<a href="#" class="myButton" onclick="TemperatureControl('lab01','decrease')"><i class="fa fa-chevron-down"></i></a> 
 
<a href="#" class="myButton" onclick="TemperatureControl('lab01','increase')"><i class="fa fa-chevron-up"></i></a>

Answer 5

あなたの非常に迅速な返信をありがとうございます。 Gowtham Shivaによって提供された解決策は、私が多くを助けましたが、私が上乗せした他の多くのものは完璧です。

最後に、ここに私のCSSファイルの内容は次のとおりです。

td{ 
    vertical-align:middle; 
} 
.myButton { 
    -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7; 
    box-shadow:inset 0px 1px 0px 0px #54a3f7; 
    background-color:#3e12cc; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    border-radius:3px; 

    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:Arial; 
    font-size:18px; 
    padding: 5px 10px 5px 10px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #154682; 
    width:20px; 
    height:25px; 
    vertical-align:-6px; 
} 
.myButton:hover { 
    background-color:#0061a7; 
} 
.myButton:active { 
    position:relative; 
    top:1px; 
} 
.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; 
} 
progress { 
    background-color: #0061a7; 
    border: 0; 
    height: 18px; 
    border-radius: 9px; 
} 

希望この記事は、似たような状況で誰かを助けます。

良い週末を過ごしてください。