Перекрытие изображения профиля в средних

Question

В настоящее время у меня есть следующий заголовок (шаблон из Bootstrap для Отзывчивых целей): -

Но это не очень приятно иметь такую ​​большую навигационную панель, так что теперь я хотите разместить изображение профиля в середине границы, как это (круг должен быть изображение профиля): -

вопрос заключается в том, как я могу добиться этого без использования абсо лютня, которая разрушит мой отзывчивый дизайн? (Это должно быть соотношение 50:50)

Edit: HTML код для профиля Изображение: -

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

CSS-часть только для переходов и стиль для изображения.

Answer 1

Попробуйте Этот код ....

<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

Вы можете просто установить высоту изображения на 200%. float: right; и width: 100px; находятся только в моем коде, поэтому он работает без изображения, но главный работает без них.

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

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

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