html - 将 float 文本水平对齐到居中 img 的两侧

Question

我对 HTML 和 CSS 中的某些概念比较陌生，而我似乎无法理解这个概念。我正在尝试对齐两个 float <p>居中 <img> 两侧的元素.这就是我基本上想要实现的目标。

即使窗口全宽，我也希望这两个文本贴在居中图像的两侧。仅当我将窗口大小时调整到它们被挤压到图像两侧的程度时，它才起作用。

.header {
  margin-top: 85px;
  text-align: center;
}

<div class="header">
  <p style="float: left; margin-top: 115px;"><a href="#listen">listen</a></p>
  <img id="main_cover" src="img/into-me.png" width="250" height="250" draggable="false">
  <p style="float: right; margin-top: 115px;"><a href="#download">download</a></p>
</div>

感谢任何帮助，特别是因为这可能是一个愚蠢的问题。提前致谢。

Answer 1

您可以使用 Flexbox或 CSS 表格 Fiddle

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

<div class="content">
  <a href="">Listen</a>
  <img src="http://placehold.it/250x250">
  <a href="">Download</a>
</div>