Question

以下是我想要的。

这是我的css代码：

<html>
<header>
<style type="text/css">
*{margin:0 0 0 0;padding:0 0 0 0} 
div.block{width:400px;height:121px;border:1px solid red;position:absolute;top:50%;left:50%;}
div.box{float:left;}
div img{margin:0px;padding:0;width:121px;height:121px;float:left;}
div.description{float:left;border 1px solid red;margin:10px  50px;}
</style>

</header>
<body>
    <div class="block">
        <div class="box"><img src="test.jpg" /></div>  
        <div class="description">
                <p>music mane:  xxxxxxxx</p>
                <p>author:  yyyyyyyy</p>
                <p>publication：20081001</p>
                <p>language：english</p>
          </div>  
     </div>

</body>
</html>

这是test.img。

div位于屏幕的右下角，如何在屏幕中心显示？top:50%;left:50%;无法获得结果。

Answer 1

使用此css

div.block{
width:400px;
height:121px;
border:1px solid red;
position:absolute;
top:50%;
left:50%;
margin-top:-60.5px;
margin-left:-200px;
}

所以诀窍是将左边距的一半宽度和上边距的一半都放在负值上。

Answer 2

试试这个

替换＆＃34; div.block＆＃34;使用此代码

div.block {
    width: 400px;
    height: 121px;
    border: 1px solid red;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

Answer 3

你应该使用margin：auto to center

Answer 4

你可以尝试这个：

*{margin:0 0 0 0;padding:0 0 0 0} 
div.block{width:400px;height:121px;border:1px solid red;position:absolute;top:50%;left:50%;margin-top:-60px;margin-left:-200px;}
div.box{float:left;}
div img{margin:0px;padding:0;width:121px;height:121px;float:left;}
div.description{float:left;border 1px solid red;margin:10px  50px;}

DEMO HERE

或

*{margin:0 0 0 0;padding:0 0 0 0} div.block{width:400px;height:121px;border:1px solid red;position:absolute;top:50%;left:50%;margin-left:-110px;} div.box{float:left;} div img{margin:0px;padding:0;width:121px;height:121px;float:left;} div.description{float:left;border 1px solid red;margin:10px 50px;}

HERE MY DEMO

如何让屏幕中心的div不在右下角？

4 个答案: