, 这两个元素都要垂直居中对齐 , 分别需要单独设置 ;
头像垂直居中对齐 , 需要使用 padding 内边距的方式设置 ;
文字垂直居中对齐 , 需要使用 内容高度 = 行高 的方式设置 ;
核心代码...放置在一行 ;
然后 , 设置用户栏头像 盒子样式 , 为其设置 6 像素 上下内边距 , 使得头像图片垂直居中 ;
整体 用户栏盒子 高度 42 像素 ;
头像图片宽高均为 30 像素 ;
头像.../* 用户栏盒子 */
.user {
float: left;
/* 高度 = 行高 垂直居中 */
height: 42px;
line-height: 42px;
/* 距离左侧 30...*/
button {
border: none;
}
/* 设置总体背景 */
body {
background-color: #f3f5f7;
}
/* 版心宽度 1200 像素 , 在浏览器中居中对齐...设置无序列表中的链接样式 */
.nav ul li a {
/* 显示模式 块级元素 */
display: block;
/* 高度 40 像素 , 总高度 42 像素 , 有 2 像素的下边框