こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

コマンドボタンを中央に表示したい

<html>
<head>

<title>test</title>
<style type="text/css">

<!--
div.div_center {
margin-left: auto;
margin-right: auto;
}
-->

</style>
</head>

<body>

<div class="div_center">
<button type="button" onclick="window.open('http://www.google.co.jp/','_blank');">google</button>
</div>

</body>
</html>

なぜこのコードではコマンドボタンは中央に表示されないのでしょうか?

margin-left: auto;
margin-right: auto;
これは違いますか?

投稿日時 - 2017-09-08 23:14:48

QNo.9372460

暇なときに回答ください

質問者が選んだベストアンサー

div.div_center {
これは、div要素に対してのもので、横幅を指定していないのでデフォルトの100%になるから、横幅一杯に表示されているのです。

div.div_center {
margin-left: auto;
margin-right: auto;
border: solid 1px #f00;
}

border でも入れてみればわかるはずです。

div要素の中身をセンタリングするには
text-align: center; で。

投稿日時 - 2017-09-10 12:03:26

お礼

回答頂きありがとうございました。

投稿日時 - 2017-09-17 21:00:59

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

すでにNo1の方が回答されていますが、
インライン要素の為に、この指定がききません。

逆に言えば、ブロックレベル要素にしてしまえば効くということなので

div.div_center button {
display:block;
margin-left: auto;
margin-right: auto;
}

なんて方法もあるかと思います。
※注)セレクタにbuttonを加えています。
ご参考までに。

投稿日時 - 2017-09-09 09:22:20

お礼

回答頂きありがとうございました。

投稿日時 - 2017-09-17 21:01:01

ANo.1

> margin-left: auto;
> margin-right: auto;

そのコードはインライン要素にはききませんよ。
その2行をそのまま以下に書き換えるとセンタリングされます。

text-align: center;

投稿日時 - 2017-09-09 00:19:10

お礼

回答頂きありがとうございました。

投稿日時 - 2017-09-17 21:01:03

あなたにオススメの質問