html - 如何在 phonegap 应用程序的标题上设置内嵌图标和文本？

Question

____________________________________________________________
| logo_icon              page_Tittle                       |
------------------------------------------------------------

我想像这样制作我的 phonegap 应用程序的标题。在标题的左边应该有一个标志(img)，在中间应该有页面标题(文本)。现在我已经试过了。

<div data-role="header" >
            <div class="logo"  > <img src="img/logo.png"  /> </div>
            <h1 id="tittle">Main Page</h1>
            <a href="" data-role="button" data-icon="delete" class="ui-btn-right"  data-transition="fade" onclick="exitButtonClick()">Exit</a>          
        </div>

和 css 它的 css 是:

.logo {
    vertical-align: left;
}
.tittle{
    text-align: center;
    display: inline-block; 
    vertical-align: middle;
}

请帮助我如何工作？我是 CSS 新手。

Answer 1

<div data-role="header" class="header" >
        <div class="logo"  > <img src="img/logo.png"  /> </div>
        <h1 id="tittle">Main Page</h1>
        <a href="" data-role="button" data-icon="delete" class="ui-btn-right"    data-transition="fade" onclick="exitButtonClick()">Exit</a>          
    </div>

CSS:

     .header{display:inline-block;
             padding:5px 15px;
             text-align:center;
             width:100%;
             }

     .logo{float:left;}

     .header h1 {font-size:15px;
                 width:80%;
                 text-align:center;}

基本上，通过将标题 div 的文本对齐属性添加为居中，并将 Logo 元素的 float 属性设置为左侧，应该可以解决您的问题

查看 js fiddle 链接 :)

http://jsfiddle.net/Q2Hkj/