1

質問は自明ですが、CSS を使用して 2 つの画像の間にテキストを配置する方法を知りたいだけです。試してみまし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

もちろん、私はそれを最も簡単な方法で見つけました。マージン付き。私がしなければならなかったmargin-topのは、テキストに合わせて を下げることだけでした。助けてくれてありがとう。

于 2013-03-06T14:22:21.197 に答える
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 に答える
-1

3 つの要素すべてを DIV 内に配置し、各 div をフロートします。問題を分類する必要があります。

于 2013-03-06T13:26:36.280 に答える