如何在两个图像之间对齐文本？答案

【问题标题】：How to Align Text Between Two Images?如何在两个图像之间对齐文本？
【发布时间】：2015-03-25 18:44:30
【问题描述】：

我有两个图像，一个左箭头和一个右箭头，需要超出文本“在此处提交您的图片！”我实际上能够实现我想要的外观：http://i.imgur.com/1k1QTE4.jpg，但我使用 z-index 来做到这一点，当屏幕变小/变大时，它不会相对于文本保持不变。您认为解决此问题的最佳方法是什么？这是我的文本代码：

<article>

<br>

<p style="text-align:center;font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</p>


<br>
<br>
<br>
<br>
<br>
<br>
</article>

实际上并没有与此相关的任何内容（css 中还没有）。谢谢！

编辑：完整的 CSS 和 HTML

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
<!--

#banner {width:100%}
#banner img {width:100%;height:auto}

nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-  
align:center;background-color:#222419}
nav li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
   font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}

a{float:left;
  margin-right:58px;
  margin-left:58px;
  color:#000;
  text-decoration:none;
 }
 body  {background-image:url("background1.jpg");
   background-size:1700px 850px;
   background-repeat:no-repeat;
}
.white_bg  {background-color:#ffffff;
        padding: 1px;
}

.col-split-3  {
 -webkit-column-count:3;
 -moz-column-count:3;
 column-count:3;
 text-align:center;
 width: 450px;
}

.col-split-3 > div {
display:block;
}

-->
</style> 
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>

<body>

<header>
<nav> 
<div style="text-align:center" id="banner">
<img src="drawyourpetsbanner3.jpg" border="0" alt="DrawYourPetsBanner3"/>
</div>

<div>
<ul>
<li><a href="index.html"><strong>HOME</strong></a></li>
<li><a href="contact.html"><strong>CONTACT</strong></a></li>
<li><a href="gallery.html"><strong>GALLERY<strong></a></li>
<li><a href="store.html"><strong>STORE</strong></a></li>
</ul>
</div>

</nav>
</header>

<section>
<aside>
</aside>

<article>

<br>

<div class="col-split-3">
<div><img src="arrow1.jpg" width="120" height="120"/></div>
<div><p style="font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</div>
<div><img src="arrow2.jpg" width="120" height="120"/></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</article>

</section>

<footer>
<div style="text-align:center" id="banner">
<img src="banner3.jpg" border="0" alt="Banner3">
</div>
</footer>

</body>
</html>

编辑 2 - 列居中

发现列类似于表格，在css中只能通过添加margin-left和margin-right:auto来居中：

.col-split-3  {
 margin-left:auto;
 margin-right:auto;
 -webkit-column-count:3;
 -moz-column-count:3;
 column-count:3;
 text-align:center;
 width: 500px;

}

.col-split-3 > div {
display:block;

}

现在我唯一的问题是“在此处提交您的图片！”在两条线上。我需要找到一种方法来扩大中心列的宽度。当前截图：http://i.imgur.com/wxe79tS.jpg

【问题讨论】：

标签： image text alignment center between

【解决方案1】：

有几种方法可以做到这一点，我只是在摆弄 - 请记住：我只在 Chrome 上测试过这些，因为我的计算机上没有安装任何其他浏览器。

示例 1

.img-left {
  float: left;
}
.img-right {
  float: right
}
.center {
  text-align: center;
  border: 1px solid black;
}

<br />
<div class="center">
  <div class="img-left">
    This is the left image
  </div>
  Text
  <div class="img-right">
    This is the right image
  </div>
</div>

示例 2（已编辑）

这个使用了一个元素内的块级元素的技巧，该元素具有 column-count CSS 属性自动拆分为列。我没有用任何大量的文本对此进行过测试，但是根据您的示例，它看起来是一个相当简单的应用程序。我为父元素添加了一个宽度来改变元素之间的间距。

.col-split-3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  text-align: center;
  width: 300px;
}
.col-split-3 > div {
  display: block;
}

<div class="col-split-3">
  <div>Image 1</div>
  <div>center text</div>
  <div>Image 2</div>
</div>

这是我最先想到的两种方法，我相信有一些方法可以使用 ::before 和 ::after 选择器来添加图像，我只是目前没有时间摆弄如何。

【讨论】：

您的第二个示例有效，但我需要的列之间的空间更少。现在看起来像这样：i.imgur.com/jLUYyxa.jpg你知道如何调整列之间的宽度/空间吗？
没有关于如何设置的 HTML，有点难以帮助，但是您可以为父元素分配一个宽度，它会改变宽度。
知道了：i.imgur.com/YdVUncZ.jpg（除了我希望文本在一行上），但现在我需要它居中。如果有帮助，我会提供完整的 css 和 html。
列居中，现在需要扩大中心列的宽度
如果您使用的是列计数方法，则无法使其更大 - 您需要另一种方法。