5

我正在尝试使用以下条件将元素（水平和垂直）居中：元素的显示是内联块，因为我希望根据其内容计算其宽度/高度。

当容器大于元素时，一切都很好。

但是，当元素大于容器时，问题就开始了，并且元素获取容器的宽度而不是其内容。

在此先感谢，奥伦

以防 jsFiddle 宕机，下面是代码片段：

<div class="working_area">
    <div class="image_container">
        <img src="http://eofdreams.com/data_images/dreams/bear/bear-05.jpg"/>
    </div>
</div>

和

.working_area {
  background: yellow;
  position: absolute;  
  width: 600px;
  height: 600px;
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}

.image_container {
  display: inline-block; 
    /*shrink a bit*/
    -webkit-transform: scale(0.7);
    /*-webkit-transform-origin: center center;*/
}
4

3 回答 3

2

您是否尝试添加：

.image_container img {
    max-width: 100%;
}

使<img>最大值达到父级的 100%，否则只会达到它的全宽而不是更宽。

小提琴

于 2013-08-09T05:49:29.383 回答
1

使用 Flexbox 的解决方案：

小提琴

（小提琴中包含的浏览器细节）

.working_area{
    background: yellow;  
    width: 600px;
    height: 600px;
    text-align:center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image_container {
  display: inline-block;  
}

img
{
    max-width: 600px; /* limit img to container width */
}

跨浏览器解决方案：

并非所有现代浏览器（如 IE9）都支持 Flexbox，因此以下解决方案可能是首选方法：

要水平居中您的图像：添加text-align:center;到父容器

至于垂直中心：由于工作区域具有固定的高度，这很容易实现。只需添加line-height: 600px; 到 .image_container 类和vertical-align:middle;你的图像类。

小提琴

所以你得到：

标记

<div class="working_area">
    <div class="image_container">
        <img src="http://eofdreams.com/data_images/dreams/bear/bear-05.jpg"/>
    </div>
</div>

CSS

.working_area {
  background: yellow;  
  width: 600px;
  height: 600px;
  text-align:center;
    margin-bottom: 20px;
}

.image_container {
  display: inline-block;
  line-height: 600px;  
}
img
{
    max-width: 600px; /* limit img to container width */
    vertical-align:middle;
}
于 2013-08-07T22:31:52.720 回答
1

用百分比设置图像大于容器，并根据图像大小减去边距。

例子：

.image_container {
    margin:0 -10%;
    width:120%;
}

这是我在你的代码上做的一个例子

http://jsfiddle.net/GPhzq/3/

于 2013-07-22T04:42:59.133 回答