☰

幅を指定せずに入力タグを中央に揃えるにはどうすればいいですか? 質問する

tag-icon • tag-icon html css
幅を指定せずに入力タグを中央に揃えるにはどうすればいいですか? 質問する

次の HTML と CSS があります:

#siteInfo input[type="button"] {
  background: none repeat scroll 0 0 #66A3D2;
  border-color: #FFFFFF #327CB5 #327CB5 #FFFFFF;
  border-radius: 10px 10px 10px 10px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 1px 1px 3px #333333;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  text-shadow: 1px 1px 1px #000000;
}
<div id="siteInfo">
  <p>Some paragraph.</p>
  <input type="button" value="Some Button">
</div>

ボタンを中央揃えにしたいのですが、text-align: centerCSS 内でも左にあります。また、テキストの長さに応じて幅を変えたいので、幅は指定したくありません。どうすればいいでしょうか?

この問題の解決方法は簡単だとわかっていますが、適切な方法が見つかりません。<p>中央揃えのタグの周りにラップすることもあります。しかし、これは余分なマークアップなので避けたいです。

ベストアンサー1

text-align:center入力自体ではなく、それを含む div に配置する必要があります。

おすすめ記事