显示标题内嵌徽标

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

了细小的改动....这样的事情：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 2

做一个集中​​表是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 3

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