css div中的文本显示在div的顶部而不是中间

jjjwad0x  于 2023-02-26  发布在  其他
关注(0)|答案(1)|浏览(283)

如何修复我的代码显示在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中上传文件,图片显示在文本旁边,与文本旁边的文本底部对齐,当图像的垂直对齐设置为中间时,然后图片显示底部... o.O如何修复它?这里是Jfiddle:https://jsfiddle.net/wD5T9/68/感谢您的解答

w8ntj3qf

w8ntj3qf1#

第一次尝试在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>

相关问题