Question

我尝试在flexbox容器中使图像正确对齐（由于移动优先方法，我使用flex-wrap：wrap，现在我有两列具有100％的宽度，在某些断点处宽度将变为50％），并且奇怪的是，它仅在我使用text-align时才起作用：对。

我尝试了margin-left：在img上为auto或justify-content：在父级上放置空格，但是img仍然通过这种方法定位。

如果有人可以帮助我找到更好的解决方案，我会很高兴的。

这是我所拥有的：

<div class="hero">

    <div class="hero__col hero__message">

        <h1>Hello world</h1>

    </div>

    <div class="hero__col hero__image">

        <!-- You need at least 10 reputation to post images -->

    </div>

</div>

<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

.hero {
    display: flex;
    flex-wrap: wrap;
    background: #ddd;
}

.hero__col {
    width: 100%;
}

.hero__message {
    text-align: center;
}

.hero__image {
    text-align: right;
}
</style>

Answer 1

我尝试了margin-left：在img上自动

自动页边距不适用于嵌入式元素。

您需要制作图像display: block才能获得所需的效果。

由于flex-wrap：wrap，如何在margin-left：auto不起作用的情况下对齐最后一个flexbox项？

1 个答案: