Question

我在页面中有以下css以始终使我的图片居中：

img {
        padding: calc(49% - 306px);
    }

我遇到的问题是“49％”是基于页面宽度，而不是我想要的高度。有没有办法可以改变它？谢谢！

注意：我的图片位于<div align="center">以使其水平居中

Answer 1

您可以将img元素更改为div并将图像作为背景图像获取，如下所示：

div {
   width:100%; 
   height:100%; 
   background:url(logo.png) center center no-repeat;
 }

Answer 2

如果没有完全了解你想要做的事情，我猜想CSS Flex是你最好的选择。我附上的代码段显示了一种在图像不是全尺寸背景时将图像居中在div中的方法。

请记住，此解决方案需要针对您的应用进行一些重新处理。

public ActionResult Test(string id)
{           
    return View("Test", (object)id);       
}

.container {
  border:1px solid red;
  margin:0 auto;
  display:flex;
  height:500px;
  width:500px;
  justify-content:center;
  align-items:center;
}

Answer 3

您可以使用flexbox吗？

＆＃13;

html, body, div.center {margin: 0;height: 100%;}
div.center {display:flex; align-items: center;}

img {
  flex: 0 0 auto;
  margin: auto;
}

＆＃13;

<div class="center">
  <img src="//placehold.it/306x100" alt="">
</div>

＆＃13;

演示：http://output.jsbin.com/xotupegove

高度的基本百分比而不是css中的宽度？

3 个答案: