Wie richtet man Inhalte horizontal und vertikal in einem div aus?

Question

Ich habe versucht, Inhalt in einem div like this auszurichten, aber es zeigt mir ein unerwartetes Verhalten. Immer wenn ich versuchte, die Bootstrap-Klasse "pull-left" auf span zu verwenden, verhält es sich like this. Auch möchte ich diese Inhalte vertikal in der Mitte ausrichten. Wie kann ich das machen.

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

Ich weiß nicht, aber es scheint wie etwas falsch mit Logo-Bild.

Bitte geben Sie mir eine Lösung. sein

Answer 1

Eine wäre leicht Ansatz:

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

Bitte beachten Sie, dass ich die Bootstrap CSS-Klasse row für die Verpackung div verwendet. Es sollte in einen Behälter gewickelt werden. Weitere Informationen zur Verwendung von 'col -...' Klassen finden Sie in den Bootstrap-Grid-Beispielen.

die Links in den zweiten div Zentrieren wird von der Mitte-V-Klasse getan:

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