0

親divと子divがあります。たとえば、子の幅と高さを親のパーセントで表すことができるかどうかを確認するために中央に配置したいと思います。

<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a  div</title>
<style type='text/css'>
.one{
width:800px;
height:100px;
background-color:grey;
}
.two{
margin-top:30px;
margin-bottom:30px;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>

実際の動作を確認するにはhttp://jsfiddle.net/thiswolf/3qRgH/

外側のdiv（親）にはがheight of 100pxあり、子のdivにはがありますheight of 40px。子を親テーマの中央に配置したいので、100px - 40px = 60px60pxを2回分割して、子のdivmargin-top:30pxとを割り当てますmargin-bottom:30px;。ただし、マージンを表現したいと思います。パーセンテージ形式で。マージンを％で表すにはどうすればよいですか。

4

2 に答える 2

0

この方法でdivを中央に配置できます（編集済み）：

<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a  div</title>
<style type='text/css'>
.one{
width: 800px;
background-color: grey;
}
.two{
min-height: 40px;
margin: 30% 355px;
width: 90px;
background-color: pink;
display: inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</div>
</div>
</body>
</html>

http://jsfiddle.net/3qRgH/2/を参照してください

これはあなたが求めていることですか？

于 2013-01-31T11:39:50.850 に答える
0

http://jsfiddle.net/thiswolf/5AZJD/

それはうまくいくようですが、私はそれを証明していません

<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a  div</title>
<style type='text/css'>
.one{
position:relative;
width:800px;
height:100px;
background-color:grey;
}
.two{
position:absolute;
top:30%;
bottom:30%;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>
于 2013-01-31T11:58:43.460 に答える