Home  >  Article  >  Web Front-end  >  Why can't the text in my li be vertically centered in Chrome? _html/css_WEB-ITnose

Why can't the text in my li be vertically centered in Chrome? _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:13:09907browse

It can be centered vertically in IE, but not in Chrome

CSS part:
#logo {
height:180px;
background-image: url(logo.gif) ;
float:none;
/*position: relative;*/
padding:0px;
margin:0px auto;
/*margin-bottom:0px;*/
/*background-color: #369;*/
}
.header .nav-bar{
height: 33px;
background-color: #F90;
overflow:hidden;
}

.header .nav-site{
height:38px;

}

.header .nav-site li{
float:left ;
}

.header .nav-site li a{
display: block;
height: 38px;
width: 100px;
line-height: 33px;
color: #fff;
font-size: 1.2em;
font-weight: bold;
text-align: center;
text-decoration: none;
}


HTML part:



< div class="nav-bar">
span>
🎜>                                                                                                     I don’t know if it’s because I’m not very talented or because the poster is not very knowledgeable? ? ? The height of your div container is 33px; the height of the ul inside is 38px; do the math yourself. It will definitely be hidden by 5px; remove overf: hidden;, and then change the height of the container to be greater than or equal to the content inside

I don’t know if it’s because I’m not very talented or the poster is not good at learning? ? ? The height of your div container is 33px; the height of the ul inside is 38px; do the math yourself. It will definitely be hidden by 5px; remove overf: hidden;, and then change the height of the container to be greater than or equal to the content inside
According to what you said, it is indeed possible, but if you remove overflow: hidden, under chrome, go up and down There will be a gap between the two divs, and I need the upper and lower divs to be seamless

I solved it myself

Quote from the 1st floor’s reply: I don’t know if it’s just me or the original poster. Not good at studying? ? ? The height of your div container is 33px; the height of the ul inside is 38px; do the math yourself. It will definitely be hidden by 5px; remove overf:hidden;, and then change the height of the container to be greater than or equal to the content inside

It is indeed possible according to what you said, but if you remove overflow:hidden, in chrome There will be a gap between the upper and lower divs, and I need the upper and lower divs to be seamless

bu ji Isn’t it just one div? ? ? Where did 2 come from?

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn