【问题标题】:Vertical alignment of image in div [duplicate]div中图像的垂直对齐[重复]
【发布时间】:2012-09-29 00:53:00
【问题描述】:

可能重复:
Vertical centering variable height image while maintaining max-width/height

所以这里有一个问题,我有不固定大小的图像,我只知道高度或宽度必须是 200px。现在我想把这个图像放在固定大小为 200px x 200px 的 div 中,并垂直和水平居中。可能吗?

我搜索了很多问题,但没有一个回答我的问题,这应该很难解决所有问题。

【问题讨论】:

  • 高度宽度?它如何适合div
  • 你试过text-align: center;line-height: 200px
  • 你检查过[this][1]吗? [1]:stackoverflow.com/questions/7336503/… 如果这不起作用,请告诉我。
  • dix 是 200px x 200px,一旦图像的宽度是 200px,所以我希望它垂直对齐,一旦它的高度是 200px,所以我想水平对齐它。一切都在中心。

标签: css html image


【解决方案1】:

来自this answer 的基本思想。不依赖 IE7 不支持的 display:table-cell;

代码 (demo)

<div class="image-wrapper"><img src="http://example.com/image.png"></div>
.image-wrapper {
    position:relative;
    width:200px;
    height:200px;
}
.image-wrapper img {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

【讨论】:

    【解决方案2】:

    你可以让它像表格单元格一样显示:

    http://jsbin.com/ijoved/1/

    /* This is item wrapping each image */
    .item { 
      height: 200px;
      width: 200px;
      display:table-cell;
      vertical-align:middle;
      text-align: center;
    }
    

    【讨论】:

    • 但是出现了一个问题,为什么元素浮动时不起作用?
    • 浮动元素使其成为display: block,因此display: table-cell;被忽略
    • 需要注意的是,IE7 不支持这种技术。
    猜你喜欢
    • 2012-04-18
    • 2012-04-02
    • 1970-01-01
    • 2012-10-21
    • 2018-10-24
    • 2013-03-06
    • 2011-07-22
    • 2016-11-14
    • 2017-03-03
    相关资源
    最近更新 更多