圖片和文字不垂直對齊中間

Question

我在CSS中嘗試了許多“ Display”參數，但似乎無法設置適當的對齊方式，請幫助我解決它。

<div id="fadeshow2toggler" style="text-align:center; width:290px;">
    <a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png"/></a>
    <div class="status">1 of 1</div>
    <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png"/></a>
</div>

Answer 1

顯示將不會設置任何分配。

這可能就是您所需要的。

<style type="text/css">
    .prev, .next, .status{float:left;}
</style>

Answer 2

嘗試這個：

<center>
    <div id="fadeshow2toggler" style="text-align:center; width:290px;">
        <a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png"/></a>
        <div class="status">1 of 1</div>
        <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png"/></a>
    </div>
</center>

Answer 3

您可以修改HTML嗎？ 如果是這樣，請為兩個錨點和div添加一個容器，如下所示

<div id="fadeshow2toggler" style="width:290px;">
<div class="linkscontainer">
    <a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png"/></a>
    <div class="status">1 of 1</div>
    <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png"/></a>
</div>
</div>

並使用此CSS

.linkscontainer{
  margin:0px auto;
  min-width:50%;
}

.status{
  display:inline;
}