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의 속성을 정렬 추가하여, l의 float 속성 설정하기 왼쪽를 봐 요소는 당신의 문제 JS 바이올린 링크 :

http://jsfiddle.net/Q2Hkj/

Answer 2

이 당신을 위해 작동합니다 :

.logo { 
    float:left; 
} 
.tittle{ 
    text-align: center; 
    width:75%; margin:0 auto; 
    vertical-align: middle; 
} 

Answer 3

나는 당신이 당신의 CSS에서 최대 % 크기의 수와 위치에와 센터의 창 크기에 따라 요소를 JavaScript 기능을 사용하는 것이 좋습니다. 어쨌든 fiddle 예제를 만들었습니다. 한번보세요.

HTML :

<div id="top_bar"> 
     <img id="logo_top_bar" src="../img/logo_top_bar.png"> 
     <section id="title">App title</section> 
    </div> 

CSS :

html,body{ 
    position: relative; 
    padding: 0px; 
    margin: 0px; 
    width: 100%; 
    max-width: 100%; 
    height: 100%; 
    max-width: 100%; 
    overflow:hidden; 
} 

#top_bar{ 
    position:relative; 
    float:left; 
    height: 60px; 
    width:100%; 
    left:0; 
    top:0; 
    overflow:hidden; 
    background-color:rgb(46, 42, 42); 
} 

#logo_top_bar{ 
    position:absolute; 
    height:30px; 
    width:70px; 
    left:4%; 
    top:15px;   

} 

#title{ 
    position:absolute; 
    left:45%; 
    top:16px;   
    font-size: 1.5em; 
    color:white; 

}