divの内容を水平方向と垂直方向に揃える方法は？

Question

div内のコンテンツを整列しようとしましたlike this しかし、予期しない動作が発生します。私がブートストラップクラス "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> 

は、私がラッピングのdivのためのブートストラップCSSクラスrowを使用していることに注意してください。 容器に包んでください。 'col -...'クラスの使用に関する詳細は、ブートストラップグリッドの例を参照してください。

第二のdivを中央-Vクラスによって行われている内のリンクをセンタリング：

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