如何在html和css中对齐同一行中的两个元素？

我有一个网页，在顶部有两个元素，一个是主页标志，另一个是上传按钮。此时的上传按钮（上传按钮应该在顶部稍多一点）与主页徽标不对齐

这是你的电话号码

主页徽标和按钮的HTML和CSS代码为：

HTML:

---

我想知道，我怎么能把主页的标志和上传按钮正确对齐（上传按钮在顶部一点点）。我确实用html为upload button创建了一个单独的类，但不幸的是，仍然使用CSS，我无法将这两个类对齐在一起

顶部：

ul li:last-child {
  vertical-align: top;
}

#上传按钮{
显示：表格；
}
#横向列表{
边缘顶部：90像素；
}
ul#水平列表li{
显示：内联；
}
ul#水平列表。主页徽标{
左边距：0px；
}
最后一个孩子{
垂直对齐：顶部；
}
img{
宽度：50px；
}

上传

我将“上载”置于左侧徽标的中心位置，并将徽标和上载水平置于中心位置

*{
框大小：边框框；
}
身体{
背景色：#4676f2；
}
/*主页徽标+上传按钮开始*/
#上传按钮{
显示：表格；
保证金：自动；
}
#横向列表{
边缘顶部：90像素；
}
ul#水平列表li{
显示：表格单元格；
垂直对齐：中间对齐；
}
ul#水平列表。主页徽标{
左边距：540px；
}
/*主页徽标+上传按钮完成*/
/*搜索框开始*/
#我的输入{
背景图片：url（../assets/img/Uploads/searchicon.png）；
背景位置：99%50%；
背景重复：无重复；
字体大小：16px；
边缘顶部：100px；
宽度：670px；
右边距：自动；
显示：块；
左边距：自动；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
/*搜索框完成*/
/*搜索框下拉列表开始*/
#密尔{
列表样式类型：无；
填充：0；
宽度：50%；
边缘底部：200px；
左边距：自动；
右边距：自动；
}
#李美儿{
边框：1px实心#ddd；
页边顶部：-1px；
/*防止双重边界*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块
}
#李美儿{
背景色：#E2；
游标：默认值；
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}
/*搜索框下拉列表完成*/

搜索索引



上传













函数myFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

只需使用flex容器现代方式即可

#horizontal-list{
    display: inline-flex;
    align-items: center;
}

请更改

 ul#horizontal-list li {
    display: inline;

}

追随

ul#horizontal-list li {
    display: inline-block;
    vertical-align: middle;
}

---

我试过了，但已经达到顶峰了。我只是想把文字上传到标志的中间。它确实起作用了。谢谢另外，我想知道，如何调整文本的移动？（我可以看到页边距顶部和页边距底部不起作用，有没有办法让它们起作用？@flash，欢迎您！请给我更多的解释。就像页边顶部和页边底部一样，我们可以调整文本的移动。为什么此处的页边距顶部和页边距底部不起作用？

页边距顶部

（和

页边距底部

）属性设置元素的顶部（底部）页边距，但在此处不起作用，最好的方法是使用

垂直对齐

。我想知道，为了正确对齐徽标和上载按钮，我需要在当前CSS代码中做哪些更改。出于某些原因，我想使用当前的HTML和CSS代码来正确对齐徽标和上载按钮。

 ul#horizontal-list li {
    display: inline;

}

ul#horizontal-list li {
    display: inline-block;
    vertical-align: middle;
}