Выравнивание элементов в навигационной панели

Ciao! У меня есть панель навигации в верхней части веб-сайта с двумя элементами: значком меню и логотипом бренда (Eiffeltower). Идея состоит в том, чтобы поместить изображение Eiffeltower в центр навигационной панели и значок меню на самой левой стороне (в области withe) навигационной панели, но у меня есть некоторые проблемы с правильной позицией в CSS.Выравнивание элементов в навигационной панели

text-align: center похоже не работает, поэтому я настроил команды padding, но я не думаю, что это приятное решение. И я не могу понять, как поместить fa fa-bar влево. Мне нужна помощь! Вы можете взглянуть?

Codepen

<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>JFP</title> 
 
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> 
 
    <link rel="stylesheet" href="/static/main.css"> 
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
    <script src="/static/app.js"></script> 
 
    <title>Untitled Document</title> 
 
    
 
    <style> 
 
    .nav { 
 
    \t list-style:none; 
 
    \t margin:0 8%; 
 
    \t padding:0; 
 
    \t position:relative; 
 
    \t text-align:center; 
 
    \t background: rgb(51,51,51); 
 
    \t color:rgb(51,51,51); 
 
    \t font-size:140%; 
 
    \t padding:0px 10px; 
 
    \t font-family:Arial, Helvetica, sans-serif; 
 
    border-bottom-left-radius: 120px; 
 
    border-bottom-right-radius: 120px; 
 
    } 
 
    .nav li { 
 
    \t position:relative; 
 
    \t z-index:2; 
 
    \t display:inline-block; 
 
    \t vertical-align:bottom; 
 
    \t text-transform:uppercase; 
 
    } 
 
     
 
    .nav a, .nav span { 
 
    \t display:block; 
 
    \t color:#fff; 
 
    \t text-decoration:none; 
 
    \t margin:0 20px; 
 
    padding-right: 80px; 
 
    } 
 
     
 
    .nav a:visited{ 
 
     color:rgb(51,51,51) 
 
    } 
 
     
 
    .nav:after{ 
 
    \t content:""; 
 
    \t position:absolute; 
 
    \t top:0; 
 
    \t bottom:50%; 
 
    \t right:0; 
 
    \t left:0; 
 
    \t background: rgb(51,51,51); 
 
    } 
 
     
 
    .nav span{ 
 
    \t width:186px; 
 
    \t height:77px; 
 
    \t background:rgba(255,255,255, 0.3); 
 
    \t font-size:77px; \t 
 
    \t overflow:hidden; 
 
    } 
 
     
 
    .nav #brand { 
 
     height: 160px; 
 
     width: 80px; 
 
     position: absolute; 
 
    } 
 
    
 
    .nav #fafa { 
 
     font-size: 30px; 
 
     color: rgb(42, 186, 214); 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul class="nav center"> 
 
    <li><i id="fafa" class="fa fa-bars"></i></li> 
 
    <li class="logo"><span><img id="brand" alt="Brand" src="https://photos-3.dropbox.com/t/2/AACJhIINsVBRwEqcMxgWNfqZu5OrjdJRMjG46W7GeV_ttw/12/5046553/jpeg/32x32/1/_/1/2/Eiffeltoren-logo.jpg/EOzL4wMYgEUgASgB/M6Hyu4cmSoxBTnl8a18nWaMYKaQpYmF2AznL32KgdT0?size=1024x768&size_mode=2"></span></li> 
 
    </ul> 
 
</body> 
 

 
</html>

источник

2015-09-21 iJup

вы можете использовать float: left на li, содержащий значок меню следующим образом:

http://jsfiddle.net/swm53ran/322/

<ul class="nav center"> 
    <li class="menubar"><i id="fafa" class="fa fa-bars"></i></li> 
    <li class="logo"><span><img id="brand" alt="Brand" src="https://photos-3.dropbox.com/t/2/AACJhIINsVBRwEqcMxgWNfqZu5OrjdJRMjG46W7GeV_ttw/12/5046553/jpeg/32x32/1/_/1/2/Eiffeltoren-logo.jpg/EOzL4wMYgEUgASgB/M6Hyu4cmSoxBTnl8a18nWaMYKaQpYmF2AznL32KgdT0?size=1024x768&size_mode=2"/></span></li> 
</ul> 
.nav .menubar { 
    float: left; 
}

ОБНОВЛЕНО: с меню в белой области: http://jsfiddle.net/swm53ran/325/

margin-left: -55px;

источник

2015-09-21 13:15:11 indubitablee

Есть ли возможность получить значок меню слева от серой области в белую область? – iJup

взгляните на мою обновленную скрипку – indubitablee

Там два пути вы можете пойти. Либо использовать float свойство, как это:

float: left;

или, вы можете установить position: absolute;, а затем использовать left свойство как это:

left: 10px;

Вы можете узнать больше о том, как горизонтально выровнять элементы в CSS от this ссылка.

источник

2015-09-21 13:15:35 Istorian

Есть ли возможность получить значок меню слева от серой области в белую область? – iJup

Вы можете изменить свой '.nav # fafa' на что-то вроде:' .nav #fafa { font-size: 30px; цвет: rgb (42, 186, 214); позиция: абсолютная; Слева: -30px; } ' – Istorian

Выравнивание элементов в навигационной панели

ответ

Смежные вопросы