我想水平对齐站点 Logo 、站点名称和站点标题，但它们都指向不同的位置。 
我想要这样的东西:
html 和 css 在这里 https://codepen.io/jonathan-lau/pen/jpJBMK
我已经display: inline-block; 但它仍然没有正确对齐。
这是我的理想 View ，只是 Logo 和站点名称未对齐。
最佳答案
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
body{
margin: 0;
padding: 0;
background: whitesmoke;
}
.site-header{
padding:10px 5%;
display: flex;
justify-content: center;
position:relative;
}
.main-logo{
img {
size: 5px;
}
}
.site-name{
font-size: 20px;
display: inline-block;
padding: 21px 32px 0;
}
.billboard{
text-align:right;
padding: 10px 5%;
margin: 0;
font-size: 20px;
}
.box__input{
text-align:right;
}
.search-box{
position: absolute;
bottom: -10px;
left: 50%;
transform: translate(-50%,50%);
background: #2F3640;
height: 40px;
border-radius: 40px;
padding:10px;
}
.search-box:hover .search-txt{
width: 320px;
padding: 0 6px;
}
.search-box:hover .search-btn{
background: white;
}
.search-box .wrapper {
position:relative;
}
.search-btn{
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2F3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
position:absolute;
top: 0;
right:0;
}
.search-txt{
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 15px;
transition: 0.4s;
line-height: 40px;
width: 0px;
min-width: 40px;
}
main {
display: flex;
justify-content: center;
}
main section {
display: flex;
flex-direction: column;
margin-top: 40px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DCS text analytics tool</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="sprint12.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<header class="site-header clearfix">
<div class="main-logo">
<a href="sprint12.html">
<img src="sample logo.jpg" alt="logo">
</a>
<p class="site-name clearfix">DCS text analytics tool</p>
</div>
<div class="search-box">
<div class="wrapper">
<input class="search-txt" type="text" name="">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
</header>
<main>
<section>
<h1 class="billboard clearfix">
Choose a file or drag it here:
</h1>
<form class="box" method="post" action="" enctype="multipart/form-data">
<div class="box__input">
<input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
<label for="file"><strong></strong> <span class="box__dragndrop"> </span></label>
<button class="box__button" type="submit">Upload</button>
</div>
</form>
</section>
</main>
</body>
</html>https://jsfiddle.net/Sampath_Madhuranga/yqb6ez4L/24/
这对你有用。尝试一下，如果有任何问题，请告诉我。
谢谢。
关于HTML-多个不正确的水平对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51816153/