html - 图像居中，文本位于图像两侧的导航栏

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

显示: flex ；证明内容:居中； 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 {
	overflow: hidden;
	background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topBar a {
  vertical-align: middle;
	float: left;
	overflow: auto;
	display: inline-block;
	padding: 2px 16px;
	font-family: courier;
	font-size: 20px;
	color: #f2f2f2;
	transition: 0.6s ease;
}
.topBar a:hover {
	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>