Question

因此，我一直在处理包含文字和图片的网页。但是，我无法找到将图像放在文本之间的方法。要么它停留在左上方，要么只是水平居中。这是重要的代码：

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

如果有人知道如何让图像在文本之间居中，那就太棒了。

Answer 1

你必须先把它们想象成块。从我得到的......你需要在水平顺序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规则...将文本放入一个不可见/透明的块中......因为我们没有声明任何背景颜色值。因此所有3个块变成相同的大小.. 200px乘200px ..并排在一行..

Answer 2

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

Answer 3

您可以使用此响应式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

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

3 个答案: