按鈕之間的中心圖像

我想在Tumblr上自定義我的博客，但我遇到了一些麻煩。我想要的是在我的博客中水平居中的圖片，其中包含下一個和上一個按鈕。它應該看起來像按鈕之間的中心圖像

-O [__] O

，其中O是我的按鈕和[_]代表我的照片。如何將三個元素集中在我的頁面上，並將按鈕與圖片相距一定數量的像素？每個按鈕都有自己的DIV，照片有一個類，並且有一個DIV包含其中的三個。

我的HTML是這樣的：

<div class="photo-wrap"> 
<div id="previous"> 
<img src="http://static.tumblr.com/gptupvc/hUhlxhrgd/next.png"></img> 
</div> 
       {block:Posts} 


       {block:Photo} 
<center> 
<a href="{Permalink}"><img class="photo" src="{PhotoURL-HighRes}"></img></a></center> 
{/block:Photo} 
{/block:Posts} 
</div> 
<div id="next"> 
<img src="http://static.tumblr.com/gptupvc/hUhlxhrgd/next.png"></img> 

</div>

與下面的CSS

.photo-wrap { 
     position:relative; 
     margin-top:50px; 
     width:1200px; 
     margin-left:auto; 
     margin-right:auto; 
     background-color:red; 

    } 

    .photo { 
     float:left; 
     height:600px; 
     border-radius:10px; 
     } 

    #next { 
     float:right; 
     margin-top:-350px; 
     background-color:green; 

     } 

    #next img { 
     width:100px; 
     height:100px; 
    } 

    #previous { 
     float:left; 
     margin-top:250px; 
     background-color:red; 

     } 

    #previous img { 
     width:100px; 
     height:100px; 
    }

來源

2012-01-08 Wouter van Dijke

使用表！哈！我知道。我們不是「允許」的。我沒有tumblr。但我通常可以爲任何HTML回答這個問題。

將你的三個小部件放到一個div中，並使用style =「text-align：center」進行設計。現在，您放入該div的任何內容都將被集中。

<div style="text-align:center">Stuff</div>

接下來，把每個部件的轉化爲自己的div和他們的風格，使他們出現「內聯」

<div style="text-align:center"> 
    <div style="display:inline">Previous</div> 
    <div style="display:inline">Button</div> 
    <div style="display:inline">Next</div> 
</div>

最後，你想間距 - 因此與margin和padding亂動，直到你得到你想要的。例如，試試這個：

<div style="text-align:center"> 
    <div style="display:inline">Previous</div> 
    <div style="display:inline;margin-left:25px;">Button</div> 
    <div style="display:inline;margin-left:25px;">Next</div> 
</div>

，你可能會想要把所有的樣式在CSS大勢所趨。但最後呢。

順便說一下，另一種實現水平間距的方法是在包含div上使用「margin：0 auto」。垂直居中是所有東西都不一樣，但你沒有問過這個問題。

祝你好運！

來源

2012-01-08 19:50:33 010110110101

我建議你試試這個代碼

<style type="text/css"> 
#image{float:left;}/*this is the important part to set float*/ 
#male{float:left;} 
</style> 

<form> 
<input id="male" type="radio" name="sex" value="male" > Male 
<div id ="image"><img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304"  height="228" /></div> 
<input type="radio" name="sex" value="female" /> Female 
</form

來源

2012-01-08 19:54:50

按鈕之間的中心圖像

回答

相關問題