如何修复我的代码以在 div 中间显示文本?因为它显示在 div 的顶部...
#fixed-menu {
padding-top: 5px;
padding-bottom: 5px;
font-family: sans-serif;
width: 100%;
height: 38px;
font-weight: light;
position: fixed;
top:0;
left:0;
right:0;
font-size: 20px;
background-color: #0082c5;
border: 3px solid #0082c5;
}
#fixed-menu img {
vertical-align: middle;
}
#fixed-menu ul {
height: auto;
padding: 0px 0px;
margin: 0px;
}
#fixed-menu li {
color: #fff;
display: inline;
padding: 10px;
}
#fixed-menu a {
padding-top: 3px;
transition:all linear 0.20s;
font-family: sans-serif;
text-decoration: none;
color: #fff;
}
#fixed-menu a:hover {
color: #000;
}
我也试着把图片放在那里,以便像#fixed-menu img 那样在中间对齐,但它不起作用,因为当我没有那个#fixed-menu img 时,我上传了文件在div中,图片显示在文本旁边,与文本旁边的文本底部对齐,当图像的vertical-align设置为中间时,图片显示在底部...o.O如何修复它?这是 Jfiddle:https://jsfiddle.net/wD5T9/68/ 谢谢解答
最佳答案
第一次尝试在div和image中没有额外的代码
#fixed-menu {
padding-top: 5px;
padding-bottom: 5px;
font-family: sans-serif;
width: 100%;
height: 38px;
font-weight: light;
position: fixed;
top: 0;
left: 0;
right: 0;
font-size: 20px;
background-color: #0082c5;
border: 3px solid #0082c5;
}
#fixed-menu img {
vertical-align: middle;
line-height: 25px;
}
#fixed-menu ul {
height: auto;
padding: 0px 0px;
margin: 0px;
}
#fixed-menu li {
color: #fff;
display: inline;
padding: 10px;
}
#fixed-menu a {
padding-top: 3px;
transition: all linear 0.20s;
font-family: sans-serif;
text-decoration: none;
color: #fff;
}
#fixed-menu a:hover {
color: #000;
}
#searchWrapper {
position: relative;
}
#searchWrapper img {
position: relative;
top: 5px;
}
<div id='searchWrapper'>
<input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search' /><img src='http://www.q-park.ie/Portals/8/images/search-icon.png'
/>
</div>
关于html - div 中的文本显示在 div 的顶部而不是中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29205643/