0

中央のタイトルにスローガンを付けて、右側にロゴを表示したいと思います。

これがコード http://jsfiddle.net/xhRnG/です

どんな助けでも大歓迎です！

ありがとうジョージ

<div id="titles">
<h1>Title</h1>
<h2>This is the slogan</h2>
<p><img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png"/></p></div>
4

5 に答える 5

1 
<div id="titles" style="text-align:center">
        <h1>Title</h1>
        <h2>This is the slogan</h2>
        <p style="float:right; position:absolute; top:0px; right:0px"><img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png"/></p>
    </div>
于 2013-02-28T22:41:48.687 に答える
1

小さな変更を加えて....次のようなもの：http：//jsfiddle.net/xhRnG/7/？

HTML：

<div id="titles">
    <div>
            <h1>Title</h1>
            <h2>This is the slogan</h2>
    </div>
            <p><img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png"/></p>
        </div>

CSS：

#titles
{
 text-align: center;   
}

#titles div, #titles p
{
    display: inline-block;
}
于 2013-02-28T22:42:05.810 に答える
0

100％幅で、中央に3つのセルがある中央のテーブルを作成します。中央の1つにはタイトルが含まれ、右側の1つにはロゴが含まれ、左側の1つは空です。タイトルをページの中央に配置できるように、左側に1つ必要です。

<div id="titles">
    <table width="100%" align="center">
        <tr>
            <td width="20%"></td>
            <td width="60%" align="center">
                <h1>Title</h1>
                <h2>This is the slogan</h2></td>
            <td width="20%">
                <img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png"/></td>
         </tr>
    </table>
</div>
于 2013-02-28T22:41:21.010 に答える
0

これはそれを行う1つの方法です：jsFiddleの例

CSS

h1, h2 {
    text-align:center;
}
#logo {
    position:absolute;
    right:0;
}

HTML

<div id="titles">
    <p><img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png" /></p>
    <h1>Title</h1>
    <h2>This is the slogan</h2>
</div>
于 2013-02-28T22:43:04.410 に答える
0

SOMEWIDTH適切な値とLOGOWITHロゴの幅に置き換えます。TOTAL_WIDTH次に、両方の合計に置き換えます。

<div id="titles" style="width: TOTAL_WIDTH; margin: 0 auto;">
    <div style="width:SOMEWITH; float:left;">
        <h1 style="text-align: center;">Title</h1>
        <h2 style="text-align: right;">This is the slogan</h2>
    </div>
    <p style="width: LOGOWIDTH; float: right;">
        <img id="logo" src="http://www.pressuredesigns.com/themes/pala/files/stacks_image_154.png"/>
    </p>
    <br style="clear: both;" />
</div>
于 2013-02-28T22:47:47.900 に答える