Question

我试图垂直调整我的社交媒体图标有点困难。我尝试过垂直文本对齐和上下50％的边距，但它们都不起作用。我不确定如何实现垂直对齐的ul类。我正在使用bootstrap，如果这有意义的话。

enter image description here

<footer>
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <p class="copyright text-muted">Copyright &copy; Eat Sleep Kayak 2015</p>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <ul class="list-inline">
                            <li>
                                <a href="#">
                                    <span class="fa-stack fa-lg">
                                        <i class="fa fa-circle fa-stack-2x"></i>
                                        <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa-stack fa-lg">
                                        <i class="fa fa-circle fa-stack-2x"></i>
                                        <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa-stack fa-lg">
                                        <i class="fa fa-circle fa-stack-2x"></i>
                                        <i class="fa fa-google fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa-stack fa-lg">
                                        <i class="fa fa-circle fa-stack-2x"></i>
                                        <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>    

    @media (max-width:768px){
        footer {text-align: center; padding: 10px;}
    }

    @media (min-width: 769px) {
        footer .list-inline {
          float: right;
        }
        footer .copyright {
          float: left;
        }
    }

    footer {
      font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      background-color: #eee;
      padding-top: 5px;
    }
    footer .list-inline {
      text-align: center;
    }
    footer .copyright {
      font-size: 14px;
    }

Answer 1

在任何情况下，text-align: center;都无法帮助垂直对齐元素。

如果你的页脚有一个固定的高度，你可以尝试：

footer .list-inline {
    line-height: 40px; /* adjust the value to the height of your footer */
}

Answer 2

你可以添加

 .list-inline > li{`position:relative;top:50%` ; transform:translateY(-50%)}

这应该可以解决问题;

<强>解释

position:relative;top:50%将其向下移动到中间，对齐图片的顶部。

transform:translateY(-50%)将图片对齐到中间。

CSS垂直对齐

2 个答案: