Question

我尝试在div like this内对齐内容但它显示了我意想不到的行为。每当我尝试在span上使用bootstrap类“pull-left”时它就表现为like this。此外，我希望这些内容垂直对齐在中心。我怎么能这样做。

.display-outside {
    margin:20px 0;
}

.h1:hover {
    color:#5d354a;
    text-decoration:none;
}

span.extra > a {
    padding:0 5px;
    color:#444;
    font-size:14px;
}

<div class="text-center display-outside">

        <span class="pull-left">
            <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>
        </span>

        <span class="extra">
            <a href="#">Horoscopes</a>
            <a href="#">How It Works?</a>
            <a href="#">Need Help?</a>
            <a href="#">Questions&Answers</a>
        </span>

        <span class="pull-right">
            <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>
        </span>

    </div>


 <div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#categories">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                </button>
                <asp:Image ID="Image2" ImageUrl="~/images/logo/logo.jpg" Width="50px" Height="50px" CssClass="display-inside img-circle" runat="server" />
                <a class="navbar-brand display-inside" href="home.aspx">Spirit Psychics</a>
            </div>


            <div class="collapse navbar-collapse" id="categories">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Psychics Reading</a>
                        <ul class="dropdown-menu horizontal-menu">
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Love Psychics</a>
                        <ul class="dropdown-menu horizontal-menu">
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                            <li class="left"><a href="#">menu</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Tarot Reading</a></li>
                    <li><a href="#">Fortune Telling</a></li>
                    <li><a href="#">Dream Analysis</a></li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Astrology Reading</a></li>
                            <li><a href="#">Career Forecasts</a></li>
                        </ul>
                    </li>

                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Join Now</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
 </div>

我不知道，但徽标图片似乎有问题。

请给我解决方案。

Answer 1

一个简单的方法是：

<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>

请注意我使用Bootstrap CSS类row作为包装div。它应该包装在一个容器中。有关使用'col -...'类的更多信息，请查看Bootstrap网格示例。

第二个div中的链接居中由center-v类完成：

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

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

1 个答案: