导航栏，图像位于中间，文本位于图像的两侧

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

父级上的

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

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