Html 如何在div中水平和垂直对齐内容？

我试图在div中对齐内容 但它向我展示了一种意想不到的行为。每当我尝试在span上使用引导类“pull left”时，它都会表现得很好。我还希望这些内容在中心垂直对齐。我该怎么做呢

。显示在外部{
利润率：20px0；
}
.h1：悬停{
颜色：5d354a；
文字装饰：无；
}
span.extra>a{
填充：0 5px；
颜色：#444；
字体大小：14px；
}

一个简单的方法是：

<div class="row display-outside">

    <div class="text-left col-md-3">
        <asp:Image ID="Image1" ImageUrl="~/images/logo/logo.jpg" Height="80px" Width="80px" CssClass="img-circle" runat="server" />
        <a href="home.aspx" class="h1 clr-purple"> <i>Spirits Psychics</i></a>
    </div>

    <div class="extra text-center col-md-6">
        <div class="center-v">
            <a href="#">Horoscopes</a>
            <a href="#">How It Works?</a>
            <a href="#">Need Help?</a>
            <a href="#">Questions&Answers</a>
        </div>
    </span>

    <div class="text-right col-md-3">
        <a href="#" title="Facebook"><i class="fa fa-facebook-square fa-3x social social-fb"></i></a>
        <a href="#" title="Twitter"><i class="fa fa-twitter-square fa-3x social social-tw"></i></a>
        <a href="#" title="Google+"><i class="fa fa-google-plus-square fa-3x social social-gp"></i></a>
        <a href="#" title="Instagram"><i class="fa fa-instagram fa-3x social social-ig"></i></a>
    </div>

</div>

---

您可以从更改跨距开始，在

.display outside

中，将跨距改为div以及如何垂直对齐添加到答案：），如果愿意，您可以在其他列中使用.center-v div。由于绝对定位，您可能需要将

宽度：100%

添加到

.center-v

。

.center-v {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.extra {
   ...
   position:relative; // Add this to your extra class
}