Question

这个问题非常自我解释，我只想知道如何使用CSS在两个图像之间放置文本。我已经尝试了position: absolute;但它并没有居中，我尝试了vertical-align: middle;但它没有做任何事情。 This是网站，我希望你们能提供帮助。

如果你不明白这个问题，基本上我要问的是如何做到这一点：
------- -------网页
[图片] [文字] [图片]
-------网页-------

编辑：似乎人们没有看到我链接到网站，或者他们无法查看来源。这是HTML的代码：

<html>
<head>
    <title>
        Epileptic Development
    </title>
    <link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
    <div id='wrap'>
    <center>
        <div id="test">
            <img id='margin' src='ewd2.png' /><br />
            <img id='whale2' src='ewd.png' /><br />
            <div id="epileptic">
                <h1 id="header">
                    Epileptic<br /> Development
                </h1>
            </div>
            <div id='p'>
                <p>
                    Welcome to the official Epileptic Development website! <br />We'll be posting our news, games and projects here!                  
                </p>
                <p id='subreddit'>
                    <a href='http://www.reddit.com/r/sonl'>Our official sub reddit</a><br />
                </p>
                <p id='iTwitter'>
                    <a href='http://www.twitter.com/doorshaveknobs'>iPoisonxL's Twitter</a><br />
                </p>
                <p id='MTwitter'>
                    <a href='http://www.twitter.com/swagmaster63487'>MaXXik's Twitter</a><br />
                </p>
                <a href='/files/babyheadsmasher.zip'><img id='bhs' src='screen.png' title='Download BABY HEAD SMASHER!!' width='231' height='227' /></a>
                <a href='/files/sonl.zip'><img id='sonl' src='sonl.png' title='Download SoNL!!' width='231' height='227' /></a><br />
            </div>
        </div>
    </center>
    </div>
</body>

这里是图像/文本的CSS代码：

#p {
font-family: inc;
font-size: 18;
border: 5px solid black;
border-top: 3px solid black;
border-radius: 15px;
-moz-border-radius: 15px;
margin-top: 0px;
background-color: orange;
margin-bottom: 0px;
padding: 10px;
padding-bottom: 284px;
}
img#margin {
    float: left;
    margin-left: 40px;
    margin-top: 20px;
}
img#whale2 {
    float: right;
    margin-right: 40px;
}
#bhs {
    float: left;
    border-radius: 15px;
    border: 5px solid black;
    margin-left: 15px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
#bhs:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}
#sonl {
    float: right;
    border-radius: 15px;
    border: 5px solid black;
    margin-right: 15px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
#sonl:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}
#subreddit {
}

注意：我只放了相关的CSS。

Answer 1

除非我误解了你的要求，否则我认为你可能会过于努力。这有效：

HTML

<img id="img1" src="http://dummyimage.com/100X100/000/fff" />
<div id="div1">This is text</div>
<img id="img2" src="http://dummyimage.com/100X100/000/fff" />

CSS

#div1 {
    display:inline;
}

结果：

enter image description here

这是a working fiddle。

Answer 2

您可以通过将float:left和float:right设置为图片来轻松完成，并将文本放在容器的最后一个子项中：

<div class="container">
    <img class="floatleft" src="http://www.epilepticdev.tk/screen.png" />
    <img class="floatright" src="http://www.epilepticdev.tk/sonl.png" />
    <div class="txt">
        <p>your text</p>
    </div>
</div>

.container {
    overflow: hidden;
}
.floatleft {
    float: left;
}
.floatright {
    float: right;
}

http://jsfiddle.net/6KwEZ/

Answer 3

<div class="maindiv">
    <div class="element">IMAGE</div>
    <div class="element">TEXT</div>
    <div class="element">IMAGE</div>
</div>

//CSS Code
.maindiv{width:600px;}
.element{width:200px; float:left;}

Answer 4

试试这个：

html：

<div>
    <img src="http://placehold.it/32x32" alt=""/>Test of text<img src="http://placehold.it/32x32" alt=""/>
</div>

css：

div {text-align:center}
div img {margin:0 5px;vertical-align:middle}

示例fiddle here

Answer 5

请尝试以下代码并将内联css转换为您的CSS。

<div>
    <div style="width:200px; float:left;">IMAGE</div>
    <div style="width:200px; float:left;">TEXT</div>
    <div style="width:200px; float:left;">IMAGE</div>
</div>

Answer 6

当然，我只是想出了最简单的方法。有利润。我所要做的只是降低margin-top以使其与文本对齐。谢谢大家的帮助。

Answer 7

将所有3个元素放在DIV中并浮动每个div。应该解决你的问题。

两个图像之间的文本

7 个答案: