我试图从头开始构建一个tumblr主题(http://themeexp1.tumblr.com/),并且我在调整中心(垂直和水平)上的Like,Reblog和Notes图标方面遇到了麻烦。将鼠标悬停在图像上。 我尝试了很多不同的方法,但似乎都没有。
图标和图像位于容器内。
CSS
.container, .container img{
width: 350px;
float: left;
}
.container{
margin-bottom: 14px;
}
.container img{
outline: 6px solid #C8C8C8;
outline-offset: -6px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.container-overlay{
width: 100%;
height: 100%;
background-color:white;
opacity: 0;
position:absolute;
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
-o-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
.container:hover .container-overlay{
opacity: 0.5;
}
.container:hover img{
outline: 6px solid rgba(200,200,200,0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.icons{
opacity: 0;
position: absolute;
}
.icons li{
float: left;
padding: 10px;
}
.container:hover .icons{
opacity: 1;
}
HTML
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="icons">
<ul>
<li>{ReblogButton color="red" size="30"}</li>
<li>{LikeButton color="red" size="30"}</li>
<li><a href="{permalink}">{NoteCount}</a></li>
</ul>
</div>
{block:Photo}
<li><a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a> </li>
{/block:Photo}
</div>
答案 0 :(得分:1)
你可以这样做:
.icons ul {
margin:0;
padding: 0;
}
.icons {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.icons li {
float: none;
display: inline-block;
}
不要保留float: none;
,只需删除原来的浮动声明。