尝试在右下方设置一个带有标语的中心标题,然后在右侧显示我的标识。
这是代码 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>
答案 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>