如何对齐文字之间的图像？

所以我一直在研究一个文本和图像的页面。但是，我找不到在文本之间放置图像的方法。要么停留在左上角，要么只是水平居中。这里是重要的代码：如何对齐文字之间的图像？

<style> 
body { 
margin: 0; 
background-image: url("rainbowbg.png"); 
} 
div #hype { 
margin-left: auto; 
margin-right: auto; 
display: block; 
positon: relative; 
} 
#hypetop { 
position: fixed; 
top: 0; 
width: 100%; 
} 
#hypebot { 
position: fixed; 
bottom: 0; 
width: 100%; 
} 
.hypetext { 
font-family: Impact, Charcoal, sans-serif; 
font-size: 64px; 
text-align: center; 
} 
</style> 
<body> 
<div> 
<h1 class="hypetext" id="hypetop">DIRE</h1> 
<img id="hype" src="DIREHYPE.png" width="224" height="224"> 
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1> 
</div> 
</body>

如果有人知道我如何能够在文本之间获得图像集中，这将是伟大的。

来源

2014-09-06 BeepBoop BapBop

你可以使用这个响应的CSS代码。这可能对你有帮助。尝试一下。我只能将position:fixed更改为position:relative。

Live Working Demo

HTML代码：

<div> 
<h1 class="hypetext" id="hypetop">DIRE</h1> 
    <img id="hype" src="http://s30.postimg.org/qnju89rkx/banner.png" width="224" height="224"/> 
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1> 
</div>

CSS代码：

body { 
margin: 0; 
background-image: url("rainbowbg.png"); 
} 
div #hype { 
margin:auto; 
display: block; 
position: relative; 
margin-top:50px; 
} 
#hypetop { 
position: relative; 
top: 0; 
width: 100%; 
} 
#hypebot { 
position:relative; 
bottom: 0; 
width: 100%; 
} 
.hypetext { 
font-family: Impact, Charcoal, sans-serif; 
font-size: 64px; 
text-align: center; 
}

结果：

result

来源

2014-09-06 18:12:00 Developer

谢谢。这对我来说非常合适。 – 2014-09-06 18:19:13

欢迎亲爱的。 – Developer 2014-09-06 18:19:47

你必须首先将它们想象成块。从我得到的...你需要3个块的横向顺序：段落|图像|这给了我们以下结构：

<p></p><img></img><p></p>

你缺少的是..你需要使用span标签，而不是标签，使他们不会中断。这是相反使页面响应（使用）的

简单地把它们像这样：

<span> 
<span id="test"><h1></h1></span> 
<img src="" width="200px" height="200px" /> 
<span id="test"><h1></h1></span> 
</span>

#test { 
position: relative; 
height: 200px; 
width: 200px; 
text-align: center; 
display: block; 
}

给上述CSS规则......把文成无形/透明块..因为我们没有声明任何backround-color值。因此所有3个块成为相同的大小...... 200px乘200px ..并排在一条线中。

来源

2014-09-06 17:53:26

移除位置：固定;从hypetop和hypebot。这导致这些元素具有固定的位置，而不是相对于图像。

来源

2014-09-06 17:54:27

如何对齐文字之间的图像？

回答

相关问题