Question

 <div >
        <img  src="some url"  />
 </div>

div高度和宽度保持不变。我想将这个img放在右边对齐并垂直放置在中心。图像的高度和宽度是固定的。如何动态解决？有时div的宽度和高度与img的宽度和高度相同。或div的宽度和高度大于img的宽度和高度...

Answer 1

在你的css中试试这段代码，

    float:right;
    margin-top:25%;

您可以在此处查看完整的代码和示例。 http://jsfiddle.net/VzLjq/

祝你好运！

Answer 2

尝试这个我认为它应该在这种情况下帮助你：

div{
  position: relative;
}
img{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
}

Answer 3

尝试使用css。

#content img.alignleft {display:inline; float:left; margin:5px 15px 5px 0;}
#content img.alignright {float:right; margin:5px 0 5px 15px;}
#content img.aligncenter {display:block; margin:10px auto;}
#content img.border {background:#ccc; border:4px solid #f0f0f0; color:#333; padding:1px;}

和你的HTML

<img class="alignright" src="img/test.jpg" height="225" width="300"
alt="Example content image using the class .alignright" />

根据您的要求尝试使用这些 css模板。

Answer 4

您可以使用 display：table 。写得像这样：

<强> HTML

<div class="parent">
  <div class="child">
    <img  src="http://dummyimage.com/200x200/000/fff&text=image"  />
  </div>
</div>

<强> CSS

.parent{
  height:400px;
  border:1px solid red;
  text-align:right;
  display:table;
  width:100%;
}
.parent .child{
  display:table-cell;
  vertical-align:middle;
  width:100%;
  height:100%;
}

选中此http://jsfiddle.net/qEYuD/

直到IE8＆amp;上方。

Answer 5

如果您的图像是静态的，则可以使用相对定位和负边距：

http://jsfiddle.net/qEYuD/3/

.parent{
  height:400px;
  border:1px solid red;
  text-align: right;
}

.parent img {
  position: relative;
  top: 50%;
  margin-top: -100px; /* half the height of the image */
}

如果您的图片和容器都有未知的尺寸，Flexbox可以用最少量的标记来完成：

http://jsfiddle.net/qEYuD/4/（不包括前缀）

.parent{
  height:400px;
  border:1px solid red;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
}

Flexbox的缺点是浏览器支持尚未完全支持。 IE10是第一个支持它的IE版本，Firefox现在正在更新他们的支持以遵循当前的规范。

如何在正确的中心定位img标签？

5 个答案: