如何将文本与中心对齐或近似对齐？

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

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

Answer 3

您应该设置display:inline;的两个内部div display:inline-block;并设置#header text-align:center;。

这是 fiddle