Question

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

非常感谢任何帮助！

由于乔治

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

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>

显示标题内联标题

5 个答案: