按钮之间的中心图像
我正在尝试在 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;
}
I'm trying to customise my blog on Tumblr, but I'm having some trouble. What I want is a picture centered horizontally in my blog, with a next and previous button around it. It should look like
O [__] O
where the O's are my buttons and the [_] represents my picture.
How do I get the three elements together to be centered on my page and the buttons a certain amount of pixels away from the picture? Both buttons each have their own DIV, the photo has a class and there is one DIV enclosing the three of them.
My HTML is like this:
<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>
with the following 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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
用桌子吧！哈!我知道。我们不被“允许”。我没有豆瓣但对于任何 HTML 我都可以回答这个问题。
将三个小部件放入一个 div 中，并使用 style="text-align:center" 对其进行样式设置。现在，您放入该 div 内的任何内容都将居中。
接下来，将每个小部件放入自己的 div 中并设置它们的样式，以便它们显示为“内联”。
最后，您需要间距 - 因此调整边距和填充，直到获得您想要的效果。例如，尝试以下操作：
您可能希望最终将所有样式放入 CSS 中。但要最后做。
顺便说一句，实现水平间距的另一种方法是在包含的 div 上使用“margin:0 auto”。
垂直居中是完全不同的东西，但你没有问这个。
祝你好运！
Use a table! Ha! I know. We aren't "allowed". I don't have tumblr. But I can answer this generally for any HTML.
Put your three widgets into a div and style it with style="text-align:center". Now, anything you put inside of that div will be centered.
Next, put each of the widgets into their own divs and style them so that they appear "inline"
Last, you want spacing -- so fiddle with margin and padding until you get what you want. For instance, try this:
And you'll probably want to put all that styling in CSS ultimately. But do that last.
By the way, another way to achieve horizontal spacing is to use "margin:0 auto" on the containing div.
Vertical centering is something all together different, but you didn't ask about that.
Good luck!
我建议你尝试这个代码
I would suggest you to try this code