如何在不影响其他两个块之间对齐图像？答案

【问题标题】：How can I align an image between two other blocks without affecting them?如何在不影响其他两个块之间对齐图像？
【发布时间】：2017-11-12 05:43:55
【问题描述】：

我正在制作一个网站来托管我的博客和艺术作品。我试图将 Twitter 图标放在居中的标题和屏幕的最左侧之间。 Click here to see the top of the page that I'm referencing.

下面是各个部分的代码。

CSS: https://pastebin.com/mqQUqxs1

HTML: https://pastebin.com/GA2bqBXG

【问题讨论】：

把所有东西都放在一个容器 div 中用 text-align: center; 在容器 div 内创建一个宽度为 50% 的新 div将 twitter 图标放在那个内部 div 中

标签： html css alignment

【解决方案1】：

这可能不是最好的方法，但你可以使用 flexbox 破解它。您将需要空跨度元素来确保空间按您希望的方式分配。像这样：

header {
  background: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<header>
  <span></span>
  <div id="twitter">
    <a href="twitter.com/wisopco"><img src="img\twitter.png" alt="Twitter" class="social"></a>
  </div>
  <h2 id="sultown" class="nav"> <a href="index.html"> SULTOWN </a></h1>
    <span></span>
    <span></span>
</header>
<form>
  <div id="search"><input type="text" name="search" placeholder="explore"></div id="search">
</form>

<a href="blogs/spectroscopy.html"><img src="img\spectroscopy.png" alt="Spectroscopy" class="media"></a>

正如我所说，spans 只是间距的占位符...

【讨论】：

我有一张推特图标的图片。我如何使用我提供的代码来做到这一点？我试过了，结果真的很乱……
您希望在标头中包含哪部分代码？只有图片和标题还是搜索表单？
这里，如果你有更多关于 flex-box 的问题，我强烈建议你看看这篇 css-tricks 文章：css-tricks.com/snippets/css/a-guide-to-flexbox
我找到了一种方法。