Question

html

<div style="display: block; height: 200px; width: 200px; background-color: red; position: relative">
  <img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" style="max-height:100%; max-width: 100%; position: absolute;"/>
</div>

根据我的div，这符合我的形象。我想要的是无论图像有多大或多小，都应根据div显示。

如果图像是垂直的，则顶部和底部应该有空白区域，如果它是水平的，则左右空白区域。图片不应拉伸，div的高度和宽度应固定。

我能够做到这一点，但垂直图像顶部对齐，水平左对齐。我怎样才能在中心位置？

Answer 1

添加left:50%＆amp; top:50%＆amp; transform: translate(-50%, -50%);

＆＃13;

<div style="display: block; height: 200px;  width: 200px; background-color: red; position: relative">
      <img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" style="max-height:100%; max-width: 100%; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); "/>
    </div>

＆＃13;

Answer 2

将所有内容放在一起，并将“wraptocenter”命名为容器的类，这是相关的CSS。 IE / Mac代码包含在合适的过滤器中。 IE7- / Win的代码放在条件注释中。

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

这就是相关的HTML

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

Answer 3

 <div class="maindiv">
        <img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" alt="tall image" />
    </div>


img
{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto auto;
}

.maindiv
{ border: 1px solid #888;
    display:table-cell;
    height: 100px;
    width: 100px;
    vertical-align: middle;
}

Answer 4

这应该有效

indexes title, as: :title, sortable: :insensitive

Answer 5

遵循以下代码：

<div style="display:inline-block; height:200px; width:200px; background-color:red; position:relative; vertical-align:middle; text-align:center">

为你编写精彩的代码！

Answer 6

您可以在div下使用以下样式进行水平和垂直对齐。

display: table-cell;
vertical-align: middle;
text-align: center;

并且position和div

都要避免img

为img添加了垂直居中的样式。

display: inline-block;
vertical-align: middle;

此外，我将HTML和样式分开，如下例所示。

div{
  height: 200px;
  width: 200px;
  background-color: red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
img {
max-height: 100%;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}

<div>
  <img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" />
</div>

Answer 7

您应该从div中删除部分样式以及img中的所有样式，并使用width属性为图像指定固定宽度，如下所示：

<强> HTML：

<div>
  <img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" width="150" />
</div>

<强> CSS：

div {
  height: 200px; 
  width: 200px; 
  background-color: red;
}
div img {
  display: table;
  margin: 0 auto;
}

参考demo。

Answer 8

对于这种情况，

flex box是一个很好的解决方案。您的代码必须稍微修改一下：

#container {
  /*flex box goes here*/
  display: flex; 
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */

  /* your old code goes here*/
  height: 200px; 
  width: 200px; 
  background-color: red; 
  position: relative
}
#img {
  /* you can change height and width to test the result */
  max-height:50%; 
  max-width: 50%; 
}

<div id="container">
  <img id="img" src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg"/>
</div>

将imge对准div的中心

8 个答案: