Question

我需要将div放在我的页面上。尺寸不固定。以下是我的工作中心

background-image: url(../img/icon.png);
    background-repeat:no-repeat;
    background-size:cover;
    border: 5px solid;
    border-radius: 10px;
    border-color: #ffffff;
    box-shadow: 0 10px 6px -3px black;;
    position: absolute;
    height: 85%;
    width: 82%;
    top: 7.5%;
    left: 9%;

如果我没有设置border属性，这可以正常工作。如果我将它设置为让我们说5px div不再水平居中。我该如何解决这个问题？

Answer 1

添加box-sizing: border-box;。所以边框不会扩展你的div。

更多大小调整：css-tricks.com/box-sizing

Answer 2

尝试

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

另外，box-shadow: 0 10px 6px -3px black;;不应该有第二个分号。

Answer 3

试试这个：

.yourclass{
background:url(../img/icon.png) no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-0-background-size: cover;
border: 5px solid;
border-radius: 10px;
border-color: #ffffff;
box-shadow: 0 10px 6px -3px black;;
display: table;
margin: 0 auto;
height: 85%;
width: 82%;
vertical-align: middle;

只是说：当你使用背景方法时，你不需要输入：＆＃34; background-image＆＃34;使用＆＃34; background-repeat：no-repeat＆＃34;，你可以输入类似＆＃34; background：url（...）no-repeat＆＃34; - 使它更小，更有条理。

将div与页面上的边框居中

3 个答案: