【问题标题】:Text in the div shows on top of the div instead middlediv 中的文本显示在 div 顶部而不是中间
【发布时间】:2015-05-26 04:06:27
【问题描述】:

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

【问题讨论】:

  • 您的CSS 不会在您的小提琴中反映您的HTML#fixed-menu 不存在。
  • 为什么?我在小提琴上看到那个菜单没有问题
  • 哦,我注意到那是该死的小提琴

标签: html css image alignment


【解决方案1】:

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

【讨论】:

  • "searchwrapper" div 不是我的,看起来我粘贴的小提琴保存了旧的 html 并只保留了我的 css ......所以 searchwrapper 不是这里的解决方案
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-10-10
相关资源
最近更新 更多