显示标题内联标题

Question

尝试在右侧有一个带有标语的中心标题然后在右侧我要显示我的标志。

这是代码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>

Answer 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>

Answer 2

通过微小的修改....这样的事情： 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;
}

Answer 3

制作一个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>

Answer 4

这是一种方法： 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>

Answer 5

更换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>