Html 垂直边框/分隔符在标题中居中

在我的标题中创建一个居中的垂直边框是可能的，而且相当容易吗？我希望它分割我的徽标/h1文本和导航栏

我知道css很混乱，我上周刚学了html和css！我可能会删除一些css

标题{
高度：60px；
宽度：85%；
/背景色：白色；
保证金：0自动；
/盒影：0px21x31px-2pxRGBA（0,0,0,0.86）；
/边框：2倍实心#333；
左：0；
右：0；
/边框大小：边框框；
/-moz框大小：边框框；
/-webkit框大小：边框框；
z指数：999999；
}
页眉#kage>*，页眉li{
显示：内联块；
}
头李{
填充：0 8px 0 8px；
浮动：左；
}
#卡奇{
宽度：99%；
保证金：0自动；
身高：100%；
线高：59px；
文本对齐：居中；
}
.按钮1：悬停{
背景色：#F2F2；
}
.按钮2：悬停{
背景色：#F2F2；
}
.按钮3：悬停{
背景色：#F2F2；
}
.主动{
文字装饰：下划线；
}
标题a{
文字装饰：无；
颜色：#333；
位置：相对位置；
}
收割台h1{
保证金：0；
浮动：左；
身高：100%；
文本阴影：1px 2px浅灰色；
}
标题h1：悬停{
颜色：#F2F2；
}
#顶置导航{
身高：100%；
/*浮动：对*/
字号：700；
字体大小：1.3em；
宽度：310.95px；
}
标题ul{
列表样式类型：无；
保证金：0；
}

有很多方法可以做到这一点。 我认为最简单的方法是在你的#topnav上留下一条边界

我很容易添加了一个边框，在你的左侧有2个像素，宽度为黑色。 并调整了一点，左边留有边距。边距：0 40px；~（页边距：右上-左下）

标题{
高度：60px；
宽度：85%；
/背景色：白色；
保证金：0自动；
/盒影：0px21x31px-2pxRGBA（0,0,0,0.86）；
/边框：2倍实心#333；
左：0；
右：0；
/边框大小：边框框；
/-moz框大小：边框框；
/-webkit框大小：边框框；
z指数：999999；
}
页眉#kage>*，页眉li{
显示：内联块；
}
头李{
填充：0 8px 0 8px；
浮动：左；
}
#卡奇{
宽度：99%；
保证金：0自动；
身高：100%；
线高：59px；
文本对齐：居中；
}
.按钮1：悬停{
背景色：#F2F2；
}
.按钮2：悬停{
背景色：#F2F2；
}
.按钮3：悬停{
背景色：#F2F2；
}
.主动{
文字装饰：下划线；
}
标题a{
文字装饰：无；
颜色：#333；
位置：相对位置；
}
收割台h1{
保证金：0；
浮动：左；
身高：100%；
文本阴影：1px 2px浅灰色；
}
标题h1：悬停{
颜色：#F2F2；
}
#顶置导航{
身高：100%；
/*浮动：对*/
字号：700；
字体大小：1.3em；
宽度：310.95px；
左边框：2倍实心rgb（0,0,0）；
利润率：0.40px；
}
标题ul{
列表样式类型：无；
保证金：0；
}

您可以简化HTML和CSS，同时仍能实现所需的布局

使用

标题

元素作为徽标和导航链接的父容器

在

标题

中，有两个子元素，

h1

和

nav

，这两个元素都是内联块元素

如果希望子元素在

标题

中居中，请使用

文本对齐：居中

调整定位

标题

可以在小屏幕上显示，您可以使用

空白：nowrap

来防止这种情况发生（您的设计选择）

然后可以调整边距、填充和边框值，以控制各个链接之间的间距

请注意，对于

nav

，请应用

vertical align:top

，否则将在基线上方或下方获得一些额外的空白

另外，如果为

标题
指定
高度
，还应指定
行高度
，以便内联子元素垂直居中（如果需要）


标题{
高度：60px；
线高：60px；
宽度：85%；
保证金：0自动；
边框：1px点蓝色；/*仅用于演示*/
文本对齐：居中；/*可选*/
空白：nowrap；/*用于防止线条缠绕，可选*/
}
收割台h1{
显示：内联块；
右边框：1px纯黑；
保证金：0；
左侧填充：10px；/*根据口味调整*/
右填充：10px；/*在垂直边框前添加空格*/
身高：100%；
}
收割台h1 a{
文本阴影：1px 2px浅灰色；
}
头
#topnav {
            height: 100%;
            /*float: right;*/
            font-weight: 700;
            font-size: 1.3em;
            width: 310.95px;
            border-left: 2px solid rgb(0,0,0);
            margin: 0 0 0 40px;
        }