8

以下はコードで、1つのdivに2つのボタンがあります。

<div style="position:relative; width: 300px; height: 30px; border: 1px solid;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>

ボタンを固定サイズで水平方向に中央に配置するにはどうすればよいですか？

4

4 に答える 4

18

text-align:center;CSSをに追加する<div>と、ボタンが中央に配置されます。また、スタイルをコンテンツから分離することも検討する必要があります。これにより、他の理由の中でも、重複が減少します。例えば

CSS

div {
    position:relative;
    width:300px;
    height:30px;
    border:1px solid;
    text-align:center;
}

input {
    position:relative;
    width:70px;
    height:30px;
}

HTML

<div>
    <input type="button" value="ok"/>
    <input type="button" value="ok"/>
</div>

編集：州の公式定義：text-align

text-alignプロパティは、ブロックコンテナのインラインレベルのコンテンツがどのように整列されるかを記述します

したがって、すべてのインラインレベル要素を中央に配置し<input>、インライン要素になります。

于 2012-04-16T11:29:04.620 に答える
1

これを試して：

<div style="position:relative; width: 300px; height: 30px; border: 1px solid; text-align:center;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>
于 2012-04-16T11:28:54.373 に答える
0

text -align：center;を指定します。メインのdivにインラインcssを使用する必要はありません外部CSSファイルを介してcssクラスを定義する必要があります。ここでは、単純なCSSで簡単に実行できるような配置は必要ありません。

**CSS**

  div {
  width: 300px; 
  height: 30px; 
  border: 1px solid; 
  text-align:center;
  }
  .button {
   width: 70px; 
   height: 30px;
  }

HTML

<div>
<input type="button" value="ok" class="button">
<input type="button" value="ok" class="button">
</div>

デモ： -http： //jsbin.com/evomik/10/edit

于 2012-04-16T12:04:47.747 に答える
-1 
<div style="position:relative; width: 300px; height: 30px; border: 1px solid;">
<div id="button_container" style="margin-left:auto; margin-right:auto;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>
</div>
于 2012-04-16T11:28:43.697 に答える