Question

我有两张图片，一张左箭头和一张右箭头，需要在文字之外＆＃34;在这里提交您的照片！＆＃34;我实际上能够实现我想要的外观：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 - 以列为中心

我发现列类似于表格，只能通过添加margin-left和margin-right在css中居中：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;

}

现在我唯一的问题就是在这里提交您的照片！＆＃34;在两条线上。我需要找到一种方法来扩展中心列的宽度。当前屏幕截图：http://i.imgur.com/wxe79tS.jpg

Answer 1

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

示例1

＆＃13;

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

＆＃13;

<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>

＆＃13;

示例2（已编辑）

这个元素在元素内部使用块级元素，并将列计数CSS属性自动拆分为列。我没有使用任何大量文本对此进行测试，但通过您的示例，它看起来是一个相当简单的应用程序。我已经为父元素添加了一个宽度来改变元素之间的间距。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

这些是我想到的前两种方式，我确定有一些方法可以使用::before和::after选择器来添加图片，我只是我们目前没有时间捣乱。

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

1 个答案:

示例1

示例2（已编辑）