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% 宽的居中表格，其中包含三个单元格：中间的一个包含您的标题，右侧的一个包含徽标，左侧的一个是空的。您需要左边的那个，这样您就可以将标题放在页面的中心。

<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

这是一种方法：jsFiddle example

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