圖像和文字不對齊到中間

我在CSS中嘗試了很多「顯示」參數，似乎沒有人能夠設置正確的對齊方式，請幫我解決它。圖像和文字不對齊到中間

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

來源

2010-10-18 JohnMax

什麼是這裏的目標是什麼？粘貼你有我看到一列：圖像，文字，圖像都集中。 – Adam 2010-10-18 13:58:36

你試圖將哪些元素居中，在哪些元素之內？ 'display'屬性不直接控制水平對齊。 – 2010-10-18 13:59:05

做一些搜索...例如http://stackoverflow.com/questions/732139/vertical-align-middle-does-not-align-to-the-middle-in-firefox – bjudson 2010-10-18 14:00:54

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

這可能是你需要的。

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

來源

2010-10-18 14:00:04

太棒了！浮動工作，但不能居中對齊，所以我做了餘裕，但是，如果你有一個解決方案，請告訴我。謝謝。 – JohnMax 2010-10-18 14:52:57

試試這個：

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

來源

2010-10-18 14:01:26 stack72

太糟糕了，它不能按我的預期工作。 – JohnMax 2010-10-18 14:53:32

你沒有真正告訴我們你想要什麼:( – stack72 2010-10-18 14:54:17

嗯，你看，你的代碼佈局在垂直而不是水平方面不同，但我們都覺得這個代碼太棘手：D – JohnMax 2010-10-18 16:50:04

可以修改HTML？如果是這樣，添加兩個錨容器中，這樣

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

div和使用CSS

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

.status{ 
    display:inline; 
}

來源

2010-10-18 15:21:34

圖像和文字不對齊到中間

回答

相關問題