センターTD

Question

EDITの内部リンクとインラインブロック要素：ここJSBINリンクです：https://jsbin.com/zapuvupato/edit?html,css,js,outputそれは

を助け場合、私は必死に要素を中央にしようとしています。 私はテキストの整列を試みました：tdの内側または外側のdivに中心を置きます。 リンクとテキストのスタイルクラスに設定されています。

text-alignが適用されているように見えますが、内側のリンク/テキストだけでなく、インラインブロック全体を中央に揃えることができます。

これを動作させることができない場合は、HTMLボタンの使用を検討しています。

td.TableButtonStyle { 

    display: inline-block; 
    border-radius: 10px; 
    text-align: center; 
    vertical-align: middle; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-left:auto; 
    margin-right:auto; 
    color: white; 
    background-color: rgb(240,80,40); 
    font-weight: bold; 

} 
.TableButtonStyle a 
{ 
    color:white; 
    text-align:center; 
} 

.Bold 
{ 
    font-weight: bold; 
} 

th.thCells{ 
    text-align:center; 
    vertical-align:middle; 
    font-size: 13pt; 
    margin: 0px 5px; 
} 
td.TableCells { 
    text-align:center; 
    vertical-align:middle; 
    font-size: 13pt; 
    padding: 15px 25px; 
    margin: 10px 50px; 
} 
</style> 

<table style = "margin: 10px 0px"> 
    <tr> 
     <th class = "TableCells thCells Bold" style = "padding: 0px 15px">Deduction per Pay Period</th> 
    </tr> 

    <tr> 
     <td id = "button1" class = "TableButtonStyle" style = "font-size: 14pt; padding: 15px 25px"></td> 
    </tr> 

</table> 

<script> 

    var buttonText1 = "<a href=\"javascript: giveButton('"+suggestedAnnualAmt1+"'); onclick:Incr1();\">$"+suggestedAmtPPP1+"</a>"; 

document.getElementById("button1").innerHTML = buttonText1; 

</script> 

Answer 1

<td>要素をボタンにしないでください。私が強くお勧めするのは、に<td>と同じスタイルを与え、次にTDからスタイルを削除し、<td>をtext-align:center;に伝えることです。

は、私が何か他のもの（.center-inside）

<td id = "button1" class="center-inside" style = "font-size: 14pt; padding: 15px 25px"></td> 

に<td>クラスを変更し、ボタンのスタイルを設定するためのCSSを変更する（そして再び、それを大きくするためにいくつかのパディングを追加しました）

td.center-inside { 
    text-align:center 
} 
.TableButtonStyle { 
    display: inline-block; 
    border-radius: 10px; 
    text-align: center; 
    vertical-align: middle; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-left:auto; 
    margin-right:auto; 
    color: white; 
    background-color: rgb(240,80,40); 
    font-weight: bold; 
    padding:20px; 
} 

ました

は、その後、私はJavaScriptであなたのボタンに.TableButtonStyleクラスを追加

var buttonText1 = "<a class='TableButtonStyle' href=\"javascript: giveButton('"+suggestedAnnualAmt1+"'); onclick:Incr1();\">$"+suggestedAmtPPP1+"</a>"; 

https://jsbin.com/mezudaciqi/1/edit?html,css,js,output

Answer 2

あなたtdは、テーブルの幅全体を取っていません。私はあなたの問題を理解するのに間違っているかもしれません。しかし、 "a"をあなたの "td"の中に集中させたいならば。 tdを次のように変更する必要があります（幅を追加するだけです）。

<td id="button1" class="TableButtonStyle" style="font-size: 14pt; padding: 15px 25px; width:100%">