显示标题内联标题

时间:2013-02-28 22:36:55

标签: html css

尝试在右下方设置一个带有标语的中心标题,然后在右侧显示我的标识。

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

5 个答案:

答案 0 :(得分: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>

答案 1 :(得分: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;
}

答案 2 :(得分: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>

答案 3 :(得分: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>

答案 4 :(得分: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>