Span middle align not working

Question

Я пытаюсь создать мобильный сайт. Необходимо получить ABC по вертикали. Я следил за другими вопросами о том, как получить текст SPAN по вертикали. Но здесь его не работает. Я включил jsfiddle. http://jsfiddle.net/3tdYT/ Я не уверен, что упускаю.

<div id="main"> 
     <div id="header"> 
      <div id="logo"><img src="http://placehold.it/72x38"></div> 
      <div id="menu">a</div> 
      <div id="title-wrapper"><div id="title"><span id="screen-title">ABC</span></div></div> 

     </div> 
     <div id="company-name">CCCCCC</div>  
    </div> 



* { margin:0; padding:0} 

#header{ 
    height:53px; 
    padding:0; 
} 
     #logo{ 
      float:left; 
      background: #ffffff; 
      padding:5px; 
     } 
     #title{ 
      text-align:center; 
      height:100%;     
      margin:0 auto; 

     } 
     #title-wrapper{ 

      height:100%; 
      background: #ff3eae; 
     } 
     #screen-title{ 
      vertical-align: middle; 
      display: inline-block; 

     } 
     #menu{ 
      width:20%; 
      height:100%; 
      float:right; 
      padding:0; 
      background: #E23222; 
     } 
#company-name{ 
    width:100%; 
    float:left; 
    background: darkblue; 
    clear:left; 
    padding:0px; 
    color: #ffffff; 
    text-align: center; 
} 
#main {width:240px} 

Answer 1

Turn #title «s дисплей в table и #screen-title» дисплей ы в table-cell:

/* ... */ 

    #title{ 
     display: table; 
     height:100%; 
     margin:0 auto; 
    } 

/* ... */ 

    #screen-title{ 
     vertical-align: middle; 
     display: table-cell; 
     text-align: center; 
    } 

http://jsfiddle.net/XMcCR/3/

Но обратите внимание, что есть много возможностей для вертикального центрирования текста с помощью CSS, каждый из которых имеет свои собственные недостатки. Это только одна возможность. Просто проверьте некоторые результаты быстрого поиска Google для «вертикального центра css». Похоже, что это своего рода научная область.

Answer 2

Добавить line-height: Xpx, где X представляет собой подходящее значение, чтобы получить эффект, который вы хотите (как правило, такой же, как высота элемента)

Answer 3

Кажется, что вы должны установить для него статическую высоту и ширину. Это должно сработать. попробуйте)

#screen-title{ 
      display: table-cell; 
      height: 50px; 
      width: 200px; 
      text-align: center; 
      vertical-align: middle;