1

这个问题很容易解释，我只想知道如何使用 CSS 将文本放在两个图像之间。我试过position: absolute;了，但它没有居中，我试过了，vertical-align: middle;但它没有做任何事情。这是网站，希望对大家有所帮助。

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

编辑：似乎人们没有看到我的网站链接，或者他们无法查看源代码。这是 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。

4

7 回答 7

2

除非我误解了您的要求，否则我认为您可能太努力了。这有效：

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

结果：

在此处输入图像描述

这是一个工作小提琴。

于 2013-03-06T13:25:47.880 回答
1

您可以通过设置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/

于 2013-03-06T13:29:07.943 回答
1 
<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;}
于 2013-04-09T15:50:47.053 回答
0

试试这个 ：

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}

示例小提琴在这里

于 2013-03-06T13:28:05.107 回答
0

请尝试以下代码并将内联 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>
于 2013-03-06T13:28:53.350 回答
0

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

于 2013-03-06T14:22:21.197 回答
-1

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

于 2013-03-06T13:26:36.280 回答