Home > Article > Web Front-end > Why can't the text in my li be vertically centered in Chrome? _html/css_WEB-ITnose
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:
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
bu ji Isn’t it just one div? ? ? Where did 2 come from?