イメージを中央に中央に、テキストをイメージの両側に中央に配置

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を作成し、残りはIMGのDIVに行くと、左側と右側をカバーする、40％または何らかの％を割り当てます。 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>