Effect:

HTML code:

<header>
<! - the title -- -- >
<div class="title-box">
	<a href="./home.html" class="title-left"><i class="iconfont" style="font-size:30px;">&#xe619;</i></a>
    <a class="title-center"><img class="logo" src=".. /img/logo.png"/></a>
	<a id="menubtn" href="javascript:;" class="title-right"><i class="iconfont" style="font-size:30px;">&#xe606;</i></a>
</div>
</header>
Copy the code

Note: Iconfont icon is used by Ali icon library

The CSS code:

/* Top title bar */
header{
	width: 100%;
	height: 60px;
	line-height:60px;
	overflow: hidden;
}
.title-box {
	display:flex;
	background: #3F404F;
	font-size:14px;
	padding:0 10px;
}

.title-left{
	text-align: left;
	display:flex;
	justify-content: center;
}

.title-box img.logo{
	margin-top:5px;
	height:50px;
}

.title-right{
	text-align: right;
}

.title-center {
	flex:1;
	text-align: center;
	color: #ffffff;
}
Copy the code