Overlapping Profilbild in der Mitte

Question

Zur Zeit habe ich die folgenden Header (Vorlage von Bootstrap für Responsive Purposes): -

Aber es ist nicht sehr schön, einen so großer Navigationsbereich zu haben, ich so jetzt will das Profil Bild in der Mitte der Grenze zu setzen, wie dies (der Kreis sollte das Profilbild sein): -

die Frage ist, wie kann ich dies erreichen, ohne eine abso mit Lautenposition, die mein ansprechendes Design ruinieren würde? (Es sollte ein Anteil von 50/50)

Edit: Der HTML-Code für das Profil Bild ist: -

<div id="nav_profile"> 
 
    <div class="profile_picture"> 
 
     <img src="assets/img/profilepicture.png" alt="Profile Picture"> 
 
     <figcaption><i class="ion-android-add"></i></figcaption> 
 
     <a id="profile_hover_txt" href="profile.php">View Profile</a> 
 
    </div> 
 
</div>

Die CSS-Teil ist nur für die Übergänge und die Styling für das Bild.

Answer 1

Versuchen Sie den folgenden Code ....

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     <a class="navbar-brand brand" href="#">Custom Logo</a> 
 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">Works</a></li> 
 
     <li><a href="#">News</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 

 
     <li> <img width="50px" height="50px" class="img-circle" src="http://i.imgur.com/bQ6Rroe.jpg" alt=""></li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
</nav>

Answer 2

Sie können die Höhe des Bildes einfach auf 200% einstellen. Die float: right; und width: 100px; sind nur in meinem Code, so dass es ohne ein Bild funktioniert, aber das Prinzip funktioniert ohne sie.

#menu { 
 
width: 100%; 
 
height: 50px; 
 
background: #000000; 
 
} 
 

 
#pic { 
 
float: right; 
 
width: 100px; 
 
height: 200%; 
 
background: yellow; 
 
}

<div id="menu"> 
 
<div id="pic"></div> 
 
</div>