html - 在图片的中心对齐图标

Question

我正在尝试从头开始构建一个 tumblr 主题 ( http://themeexp1.tumblr.com/ )，当您将它悬停时，我在对齐图像中心(垂直和水平)上的赞、转发和注释图标时遇到了很大的麻烦.我尝试了很多不同的方法，但似乎都没有用。

图标和图像在容器内。

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;，不如删除原始的 float 声明。