導航欄圖像中間居中，文字兩側圖像

Question

我嘗試使導航欄的圖像居中，圖像中間的文字位於中間，但問題是我無法在至少有一點工作的事情。我現在的代碼示例如下。任何建議如何解決？

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
* {box-sizing:border-box} 
 
body {font-family: Verdana,sans-serif; margin:0; padding: 0;} 
 

 
.topBar { 
 
\t overflow: hidden; 
 
\t background-color: #333; 
 
\t height: 45px; 
 
\t position: relative; 
 
\t width: 100%; 
 
} 
 
.topBar a { 
 
    vertical-align: middle; 
 
\t float: left; 
 
\t overflow: auto; 
 
\t display: inline-block; 
 
\t padding: 2px 16px; 
 
\t font-family: courier; 
 
\t font-size: 20px; 
 
\t color: #f2f2f2; 
 
\t transition: 0.6s ease; 
 
} 
 
.topBar a:hover { 
 
\t background-color: rgba(0,0,0,0.5); 
 
} 
 
.topBar-logo { 
 
\t position: absolute; 
 
\t left: 50%; 
 
} 
 
.topBar-textLeft { 
 
\t float: right; 
 
} 
 
.topBar-textRight { 
 
\t float: left; 
 
}

<div class="topBar"> 
 
    <div class="topBar-textLeft"> 
 
    <a>Informacie</a> 
 
    <a>Domov</a> 
 
    </div> 
 
    
 
    <img src="http://i.imgur.com/ZbKfy4E.png" class="topBar-logo"> 
 
    
 
    <div class="topBar-textRight"> 
 
    <a>Album</a> 
 
    <a>Kontakt</a> 
 
    </div> 
 
</div>

Answer 1

在父將創建一個水平和垂直方向爲中心的行display: flex; justify-content: center; align-items: center;。您也可以從兒童中刪除所有的定位。

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
* {box-sizing:border-box} 
 
body {font-family: Verdana,sans-serif; margin:0; padding: 0;} 
 

 
.topBar { 
 
\t overflow: hidden; 
 
\t background-color: #333; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.topBar a { 
 
    vertical-align: middle; 
 
\t float: left; 
 
\t overflow: auto; 
 
\t display: inline-block; 
 
\t padding: 2px 16px; 
 
\t font-family: courier; 
 
\t font-size: 20px; 
 
\t color: #f2f2f2; 
 
\t transition: 0.6s ease; 
 
} 
 
.topBar a:hover { 
 
\t background-color: rgba(0,0,0,0.5); 
 
}

<div class="topBar"> 
 
    <div class="topBar-textLeft"> 
 
    <a>Informacie</a> 
 
    <a>Domov</a> 
 
    </div> 
 
    
 
    <img src="http://i.imgur.com/ZbKfy4E.png" class="topBar-logo"> 
 
    
 
    <div class="topBar-textRight"> 
 
    <a>Album</a> 
 
    <a>Kontakt</a> 
 
    </div> 
 
</div>

Answer 2

你要創建的圖像周圍一個div，然後分配40％或某些％，將覆蓋左側和右側，其餘將在IMG的div。然後擺脫img上的課程。

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
* {box-sizing:border-box} 
 
body {font-family: Verdana,sans-serif; margin:0; padding: 0;} 
 

 
.topBar { 
 
\t overflow: hidden; 
 
\t background-color: #333; 
 
\t height: 45px; 
 
\t position: relative; 
 
\t width: 100%; 
 
} 
 
.topBar a { 
 
    vertical-align: middle; 
 
\t float: left; 
 
\t overflow: auto; 
 
\t display: inline-block; 
 
\t padding: 2px 16px; 
 
\t font-family: courier; 
 
\t font-size: 20px; 
 
\t color: #f2f2f2; 
 
\t transition: 0.6s ease; 
 
} 
 
.topBar a:hover { 
 
\t background-color: rgba(0,0,0,0.5); 
 
} 
 
.topBar-logo { 
 
\t position: absolute; 
 
\t left: 50%; 
 
} 
 
.topBar-textLeft { 
 
\t float: right; 
 
} 
 
.topBar-textRight { 
 
\t float: left; 
 
}

<div class="topBar"> 
 
    <div class="topBar-textLeft" style='width:40%'> 
 
    <a>Informacie</a> 
 
    <a>Domov</a> 
 
    </div> 
 
    <div style='width:20%;display:inline-block;text-align:center'> 
 
    <img src="http://i.imgur.com/ZbKfy4E.png" > 
 
    </div> 
 
    <div class="topBar-textRight" style='width:40%'> 
 
    <a>Album</a> 
 
    <a>Kontakt</a> 
 
    </div> 
 
</div>