みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

css javascriptについて教えて下さい。

下記のように、ボタンを押すとdivタグの中にpタグを表示するようにしました。
そこで、そのpタグがdivタグの中央から表示するようにしたいのですが、できません。cssでpタグの左右のmarginをautoにするのかくらいしか思いつかず困っています。pタグがdivタグの中央から表示されるようにするにはどうしたらよいでしょうか。教えて下さい。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>

<style>
#w{
width:500px;
height:50px;
border : solid 1px;
overflow: hidden;
}


p{
display:inline-block;
width:50px;
height:50px;
margin-left:auto;
margin-right:auto;
}

</style>

<script type="text/javascript" language="javascript">
var count = 0;
var box;
window.onload = function() {

box = document.getElementById("w");

}

function btnClick(){

var pNode = document.createElement("p");
pNode.innerHTML = count;
  box.appendChild(pNode);

count ++;

}

</script>
</head>

<body>

<div id="w"></div>
<button onClick="btnClick()">Pタグを生成</button>

</body>
</html>

投稿日時 - 2019-01-31 21:44:43

QNo.9583335

すぐに回答ほしいです

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

CSSを以下の記述例に変更すれば、いわゆる「中央揃え」になります。

#w {
width: 500px;
height: 50px;
border: solid 1px;
overflow: hidden;
text-align: center;
}
#w p {
display: inline-block;
margin: auto .5em;
line-height: 100%;
}

P.S.
<p>のサイズ指定は無駄に思えたので削除しましたが…何らかの理由があってサイズ指定を付与しているのであれば、適宜再指定してください。

また<p>のスタイル指定はページ内外の他の<p>と干渉しない様に、セレクタ指定をより厳密に #w p{...} としてピンポイントにスクリプトで新規作成されるDOMのみに作用する様にしてます。

投稿日時 - 2019-01-31 23:05:28

お礼

ありがとうございます。お礼が遅くなり失礼しました。

投稿日時 - 2019-06-24 18:59:40

ANo.1

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

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

回答(1)

あなたにオススメの質問