Question

我正在尝试在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;
    }

Answer 1

使用表格！哈！我知道。我们不是“允许的”。我没有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>

最后，你需要间距 - 所以要小心边距和填充，直到你得到你想要的。例如，试试这个：

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

垂直居中是不同的东西，但你没有问过这个问题。

祝你好运！

Answer 2

我建议你试试这段代码

 <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

按钮之间的中心图像

2 个答案: