【问题标题】：HTML/CSS Image center alignmentHTML/CSS 图像居中对齐
【发布时间】：2017-11-23 15:29:36
【问题描述】：

我做了一个网站，主页看起来像这样：

我想把 ficstore 标志移到中间，把条分成两半，在两边各放一个，像这样：

我已将条形图的每一侧分成两个不同的部分，并尝试将图像放在不同的列中。但这似乎不起作用。

这是当前代码的 sn-p：

<div class="container">
    <div class="row">
        <div class="col-xs-8">
                        <h2 style="font-family:helvetica;"><span>Home Page</span></h2>

        </div>
        <div class="col-xs-4">
            <img src="http://lorempixel.com/400/200/" class="img-responsive right" style="width:400px; z-index:1;" />
        </div>
        <img src="http://lorempixel.com/400/200/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;" />
    </div>
<hr class="style18" />

有人可以帮忙吗？

我也尝试过以下代码：

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <h2 style="font-family:helvetica;"><span>Book Info</span></h2>
        </div>
        <div class="flex-row">
            <div>
                <img src="http://lorempixel.com/400/200/" class="img-responsive right" style="width:400px; z-index:1;" />
            </div>
            <div>
                <img src="http://lorempixel.com/400/100/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;" />
            </div>
            <div>
                <img src="http://lorempixel.com/400/100/" class="img-responsive right" style="position: absolute; margin-top: 135px; z-index: -2;" />
            </div>
        </div>
    </div>
<hr class="style18" />

CSS：

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

【问题讨论】：

您的代码中只有 2 个imgs。你使用的是什么版本的引导程序？ 3 还是 4？
有两张图片，因为此代码适用于只有栏和徽标的原始页面。
我使用的是 Angular 2。如何找到引导版本？
请在问题中提供minimal reproducible example。如果我要复制您的代码并运行它，我会得到“主页”和一些损坏的图像。您可以使用lorempixel.com 之类的服务来使用占位符图像。
如果您使用的是 CDN，请检查您的页面并查看 URL 路径中的版本号，或者只是在您的站点上或通过 CDN 浏览到脚本，它应该在顶部。

标签： html css twitter-bootstrap

【解决方案1】：

我建议你必须有 3 张图片。酒吧应该分成两部分。将 Ficore 放在中间，然后添加 display:block。

【讨论】：

【解决方案2】：

这是一种方法。我会鼓励你放弃你正在使用的任何框架。 col-x-whatever 是个坏消息。

这也是一个小提琴 - 使用内联块方式。

https://jsfiddle.net/sheriffderek/fcwyg0zb/

内联块

.images { 
  text-align: center;
}

.images .image-w {
  display: inline-block;
  vertical-align: middle;
}

弹性盒

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}

.one {
  max-width: 200px;
}

.two {
  max-width: 400px;
  margin: 0 1rem;
}

.three {
  max-width: 200px;
}

.images {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

<section class='images'>

  <div class='image-w one'>
    <img src='https://placehold.it/300x150' alt='left'>
  </div>
  
  <div class='image-w two'>
    <img src='https://placehold.it/600x300' alt='center'>
  </div>
  
  <div class='image-w three'>
    <img src='https://placehold.it/300x150' alt='right'>
  </div>

</section>

【讨论】：

所以你鼓励人们放弃全功能、跨浏览器/跨设备的支持框架，转而使用定制的框架，到目前为止具有：a) 固定宽度的非响应式列， b) 居中。只需一项小修改即可支持所有现有设备和浏览器：“适用于某些设备，不适用于其他设备”。我错过了什么吗？
是的。我想这就是我所说的。我不会给每个人同样的建议。只是有人提出这样的问题 - 因为他们可能会学习“框架”而不是 CSS。

【解决方案3】：

现在是使用 flex 的好时机：

HTML：

<div class='flex-row'>
  <div><img src="left.png"></div>
  <div><img src="center.png"></div>
  <div><img src="right.png"></div>
</div>

CSS：

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

【讨论】：

你需要摆脱那些内联样式才能为你工作。
我做到了。现在我的页面中间有一个放大版的我的标志，左右图像也没有对齐。
那么你的html现在是什么样子的？
图书信息
对不起，我认为我不能在 cmets 中格式化代码

内联块

弹性盒

图书信息