ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
QNo.3975106 スタイルシートでボックスを中央に表示する方法
質問者：convalley 大ボックスを中央に配置して
その中に、小ボックスを上から10、左から20の位置に配置させたいのですが、
大ボックスが中央に配置できません。
少し右側にズレてしまいます。
（ソースは文章最後にあります）

そこで大ボックスの　position: absolute; 　を削除すると
中央に配置できるものの、小ボックスが外に飛び出して
ブラウザを基点とした上から10、左から20の位置に配置されてしまいます。

tableタグを使わずにCSSのみで
大ボックスを中央に。
その大ボックスの中に大ボックスの左上を基点として上から10、左から20の位置に
小ボックスを配置する方法はないのでしょうか・・・。

よろしくお願い致します。


<html>
<head>
<title>box</title>
<style type="text/css">

<!--
.boxL { /* 大ボックス */
width: 400px;
height: 100px;
background-color: green;
position: absolute;
}

.box1 { /* 小ボックス */
width: 75px;
height: 30px;
background-color: lightblue;
position: absolute;
top: 10px;
left: 20px;
}

-->
</style>
</head>
<body>

<div align="center">
　<div class="boxL">

　　<div class="box1">小ボックス</div>

　</div>
</div>

</body>
</html>
困り度：
  • 困っています
質問投稿日時：
08/04/25 15:50
この質問に対する回答は締め切られました。

回答良回答20pt
ANo.1 ・　とりあえず、.boxL の position を

.boxL { /* 大ボックス */
width: 400px;
height: 100px;
background-color: green;
position: relative;
}

としてみてください。

.box1 の　
position: absolute;
が、ボックス .boxL からの相対となります。
回答者：auty
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：
08/04/25 16:29
この回答へのお礼ありがとうございます！
positionは absolute と static しか頭に入ってませんでした・・・
ちゃんと表示することができました。

おかげさまで無事解決しましたので、
回答を締め切らせていただきます。

本当にありがとうございました！
 
このページのトップへ