web-dev-qa-db-ja.com

Tdでボタンを中央揃えしようとしています

Tdのボタンを中央に配置するのに問題があります。

これはおそらく単純なCSSの問題ですが、アプリはブートストラップ、AngularJS、AngularJS-ui-bootstrap、およびngTableを使用しています。 plunkr にこれらのコンポーネントをすべて含めました。

ボタンを使用してtdに「horizo​​ntal-align：middle」を設定しようとしていますが、適用されないようです。ボタンはまだセルの左側に傾いています。

htmlcssangularjstwitter-bootstrap-3ngtable
26
David M. Karr

以下を使用できます。

display: block;
margin: auto;

こちらが更新されたプランカーです

50
meriadec

上記のコメントで述べたように、TDをalign = "center"プロパティに変更するだけです。

<td align="center"></td>

これを投稿してから、これはHTML5で非推奨になっていることがわかりました。CSSでTD

9
Billy Moat

これは私のために働いた

<td style="text-align: center">

2
vineel

ページ上のJSFコントロールを中央に配置するには、次の属性を組み合わせる必要があることがわかりました。

<h:form style="display: block; text-align: center; margin: auto; width: 200px">
<!-- components here -->
</h:form>
2
Fuzzy Analysis

Bootstrap 4を使用している場合、これらのクラスを<td>要素（2つのボタンがあります）：

<td class="text-center align-middle">
    <div class="btn-group">
        <button class="btn btn-outline-primary">+</button>
        <button class="btn btn-outline-primary">-</button>
    </div>                
</td>

text-centerはコンテンツを水平方向に中央揃えし、align-middleコンテンツを垂直方向に中央揃えにします。

1
tdahman1325

Tdの代わりにボタンを変更しますか？スタイルへの影響を少なくします。

table .btn{
  vertical-align: top;
}
1
Jens Alenius
HTML:
    <td class="table-row-radio-button"> <input type="radio"> </td>
CSS:
    .table-row-radio-button {
        text-align: center;
    }

私のために働いた。

0
Vinay

私にとってはうまくいきました

<td align="center">
 <input type="button" style="float:none!important;display:inline;" value="click" />
</td>
0
Sundara Moorthy Anandh