Question

我试图从头开始构建一个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>

Answer 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;，只需删除原来的浮动声明。

对齐图片中心的图标

1 个答案: