在我们的设计里,这个标志的显示会大一些 .. 我设置了这个 header 元素下面的 img ,也就是这个图像的样宽度..
不过又给它添加了一点内边距,这个宽度应该是图像的宽度,再加上左右两边儿的 8 个像素的边距 ..
也就是图像显示的实际的宽度应该减掉 16 像素 ... 这是浏览器默认的行为,我们可以去修改一下 .. 添加一个 box-sizing 属性,它的值可以设置成 content-box .. content 表示内容 .. 这样我们设置的这个宽度,应该就是内容的宽度,也就是这个图像的宽度...
我们再单独设置一下这个标志元素的对齐方式,在 content 这里,已经设置了 align-items ,让所有的子元素在 flex-end 位置上显示,这里就是底部 ..
我想让标志可以在垂直居中在导航栏上 .. 添加一个样式选择器 .. .header
在它里面用一下 align-selft ,单独去设置一下这个元素的对齐,可以设置成 center ,表示居中 ..
你会看到这个标志元素的微小的变化 ..