Question

我有一个flex的图像，它在Edge浏览器中延伸，但在其他浏览器中是正常的。这是我的代码和jsfiddle。在chrome和edge中打开jsfiddle url ..我希望它看起来像边缘的chrome。

<div class="logo">
  <img src="http://placehold.it/100x70">
</div>
<img src="http://placehold.it/100x70">

#include <stdio.h>

// function  main begins program execution
int main(void)
{
    int numberOfDays = 0;
    float numberOfMiles = 0;
    float milesCharge = 0;
    float milesTotal = 0;
    float total = 0;
    float subtotal = 0;
    float tax = 0;

    do {
        printf("%s", "How many days was car rented?\t");
        scanf("%d", &numberOfDays);
    } while (numberOfDays < 1 );

    do {
        printf("%s", "How many miles were driven?\t");
        scanf("%d", &numberOfMiles);
    } while (numberOfMiles > 1);

    if (numberOfMiles > 1 || numberOfMiles < 200) {
        milesTotal = numberOfMiles * .40;
    } else {
        milesTotal = numberOfMiles * .35;
    }

    subtotal = milesTotal + numberOfDays * 15;
    tax = subtotal * .06;
    total = tax + subtotal; 

    printf("\nSubtotal:\t\t\t$%.2f\n", subtotal);
    printf("Tax Amount:\t\t\t$%.2f\n", tax);
    printf("Total:\t\t\t\t$%.2f\n", total);
    printf("\n");
}

JSFIDDLE

Answer 1

而不是align-self: center使用align-items: center。

.logo {
    height: 100px;
    display: flex;
    /* align-self: center; */
    align-items: center; /* new */
    width: 200px;
    background: red;
}

align-self属性适用于弹性项目。除了div.logo元素不是灵活项目，因为其父级 - body（在这种情况下）没有应用display: flex或display: inline-flex。因此，body不是灵活容器，div不是灵活项目，align-self无效。

align-items属性类似于align-self，但它适用于Flex容器。

但是，.logo img设置了margin: auto。这应该足以使图像在容器中垂直和水平居中。对于子级margin: auto，应覆盖容器上的任何align-items或justify-content规则。

来自规范：

8.1. Aligning with auto margins

在通过justify-content和align-self进行对齐之前，任何正的可用空间都会分配到该维度中的自动边距。

注意：如果可用空间分配到自动边距，则对齐属性在该维度中不起作用，因为边距将在弯曲后窃取剩余的所有可用空间。

大多数浏览器都遵循标准行为。 Edge（和IE10＆amp; 11）不符合规定。

防止Flex容器中的图像在Edge中拉伸

JSFIDDLE

1 个答案: