Question

我已经做了很多搜索，发现了很多这个问题的答案，但是当我在我的特定设置中尝试它们时，它们似乎都没有。这是我试图解决的问题的JSFiddle：

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    float: left;
}
.classB {
    width: auto;
    height: auto;
    max-width: 50px;
    max-height: 50px;
}

<div class="classA">
    <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>

我试图将图像自动调整为包含的div，使其在div中水平和垂直居中。我无法将图像作为div的背景。

我尝试过各种类型的显示（内联，内联块）的自动边距。我已经尝试了text-align属性，以及vertical-align。我试过了中心标签。我没有尝试过任何工作。

解决方案应该使图像水平和垂直居中。

Answer 1

将CSS添加为下面的

.classB {
    Margin:auto;
    max-width: 50px;
    max-height: 50px;
}

Answer 2

你可以使用内联块+伪元素技巧。

＆＃13;

execSQL

＆＃13;

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    float: left;
    text-align: center;
    font-size: 0;
}
.classA:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.classB {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
}

＆＃13;

注意，只有当图像是容器中唯一的子容器时，该解决方案才有效，并且容器具有已知的高度集。

顺便说一句<div class="classA"> <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"> </div>是自动关闭代码，<img>语法错误，只需使用<img></img>或<img src="">。

Answer 3

如果您需要垂直和水平居中，那么这就是您需要的

http://jsfiddle.net/M_Elf/38kgyzwu/2/

一般

    margin:0 auto;

创造奇迹

或者：如果你只需要水平居中，只需使用

margin-left:auto;
margin-right:auto;

主包装上的

Answer 4

将您的CSS更改为以下内容：

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    padding: 5px;
}

.classB {
    display: block; margin: auto;
    object-fit: cover;
    max-width: 100%;
    height: 100%;
}

CSS object-fit: cover有助于在不降低质量的情况下适应图像。

JSFiddle

在此处详细了解object-fit：object-fit - MDN Docs

Answer 5

你说你试过阻止和内联阻止;你尝试显示包含div的表格单元格吗？通常会给你需要强制你正在寻找的对象。

Answer 6

在这里 - 你需要四行代码（不包括css供应商前缀）：

text-align: center;为水平定位提供了技巧
position: relative; top: 50%; transform: translateY(-50%);垂直居中图片

我添加了两个不同大小但具有相同其他属性的块，以便您了解它是否具有通用性。检查在最新的chrome，safari，IE10和Opera中，它可以保持一致。

＆＃13;

.classA {
    background-color: yellow;
    width: 300px;
    height: 50px;
    float: left;
    
    text-align: center;
}

.classB {
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 50px;
       
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.classA2 {
    background-color: yellow;
    width: 100px;
    height: 70px;
    float: left;
    
    text-align: center;
}

.classB2 {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 70px;
       
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.separator {
    display: block;
    clear:both;
    padding:20px;
}

＆＃13;

<div class="classA">
    <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
<div class="separator"></div>
<div class="classA2">
    <img class="classB2" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>

＆＃13;

希望这会有所帮助：）

水平和垂直居中自动调整大小的图像

6 个答案: