div에 가로 및 세로로 내용을 정렬하는 방법은 무엇입니까?

Question

div 내 콘텐츠를 정렬하려고 시도했습니다. like this 예기치 않은 동작이 발생합니다. 내가 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> 

내가 포장 사업부의 부트 스트랩 CSS 클래스 row를 사용하는 점에 유의하시기 바랍니다. 용기에 포장해야합니다. 'col -...'클래스 사용에 대한 자세한 정보는 부트 스트랩 격자 예제를 확인하십시오.

가

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

이 당신은