如何將文字與中心對齊或大致靠近？

Question

我該如何讓id=latest_tweet來到id=logo的中心某處？

注：我正在嘗試水平對齊，圖像在左邊，而latest_tweet在右邊，但在中心。

HTML：

<div id="header"> 
     <span id="logo"> <img src="twibuffer.gif" alt="twibuffer" /> </span> 
     <span id="latest_tweet"> Latest Tweet:</span> 
</div> 

CSS：

#header { 
    margin-bottom:2%; 
} 

#latest_tweet { 
    margin-left:40%; 
    float:left; 
} 

Answer 1

http://jsfiddle.net/2jpDw/2/show
http://jsfiddle.net/2jpDw/2

#header { 
    text-align: center; 
} 

#header span { 
display: inline-block; 
vertical-align: middle; 
} 

Answer 2

您應該設置display:inline-block;的兩個內部分區display:inline;，並設置#header text-align:center;。

這裏是一個fiddle

Answer 3

Demo

CSS

.block { 
    text-align: center; 
} 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
} 
#header { 
    display: table; 
    width: 100%; 
} 
#latest_tweet { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

HTML

<div class="block"> 
    <div class="centered"> 
     <span id="header"> 
      <img src="http://numenta.org/images/stackoverflow.png" alt="twibuffer"/> 
      <span id="latest_tweet">Latest Tweet</span> 
     </span> 
    </div> 
</div>