Html 样式导航按钮与css形状渐变，渐变背景，居中文本

所以我尝试在不使用图像的情况下制作导航按钮。但是我不能让CSS正常工作。除了文本的垂直对齐外，我设法获得了所有内容，但到了这一步，我觉得代码变得比需要的更草率。以下是我所拥有的：

.nav\u按钮{
高度：18px；
背景：线性梯度（#3d3c3b0%，#0a0b0a50%）；
边缘顶部：5px；
}
.arrow_集装箱{
显示：内联块；
宽度：35px；
}
.导航箭头{
宽度：20px；
高度：18px；
背景：线性梯度（#D2DA76 0%，#5EB649 50%）；
}
.导航链接{
显示：内联块；
宽度：125px；
文本对齐：居中；
}
.nav_arrow:：之后{
显示：块；
内容：''；
高度：18px；
宽度：20px；
背景：线性梯度（右下角，#D2DA76 0%，#5EB649 50%）；
变换：平移（10px，0px）比例（.8，.715）旋转（45度）；
}

使用“行高”进行文本的垂直对齐。这里有一个例子

div{
高度：90px；
线高：90px；
文本对齐：居中；
边框：2个虚线#f69c55；
}

你好，世界！

尝试垂直对齐按钮内的文本

.nav\u按钮{
高度：18px；
背景：线性梯度（#3d3c3b0%，#0a0b0a50%）；
边缘顶部：5px；
}
.arrow_集装箱{
显示：内联块；
宽度：35px；
}
.导航箭头{
宽度：20px；
高度：18px；
背景：线性梯度（#D2DA76 0%，#5EB649 50%）；
}
.导航链接{
显示：内联块；
宽度：125px；
文本对齐：居中；
垂直对齐：顶部；
}
.nav_arrow:：之后{
显示：块；
内容：''；
高度：18px；
宽度：20px；
背景：线性梯度（右下角，#D2DA76 0%，#5EB649 50%）；
变换：平移（10px，0px）比例（.8，.715）旋转（45度）；
}

---

更好的解决方案可能是根据文本行高的大小实际构建按钮的结构，而不是尝试硬编码大小，然后再更新行高

html的简化是基于这样一个想法，即我们在按钮上使用一个渐变覆盖，而不是用不同的颜色分别淡化按钮背景和“箭头”部分。然而，这并不完全符合设计

.nav\u按钮\u alt{
显示：内联块；
边框：1px实心#888；
颜色：#FFF；
文字装饰：无；
字体系列：Helvetica、Arial、无衬线字体；
位置：相对位置；
背景#5EB649；
字体大小：1.2米；
线高：1.4em；
填充：0.2米0 40像素；
最小宽度：125px；/*如果希望按钮相对于文本大小，请删除此选项*/
}
.nav_按钮\u alt>span{
显示：内联块；
位置：相对位置；
宽度：100%；
z指数：3；
文本对齐：居中；
}
/*提供淡入度*/
.nav_按钮_alt:之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
z指数：2；
身高：100%；
背景图像：线性梯度（rgba（255255,0.6）0%，rgba（255255,0）50%）；
}
/*提供绿色背景的“黑色”覆盖*/
.nav_按钮_alt:之后{
内容：“；
位置：绝对位置；
左侧：距离箭头开始的右侧1.2米；/*距离*/
排名：0；
身高：0；
右：0；
左边框：1em实心透明；/*绿色箭头点的大小*/
边框顶部：0.7em实心#000；/*按钮高度的一半*/
边框底部：0.7em实心#000；/*按钮高度的一半*/
z指数：1；
}

---

你能提供一张你最终结果的图像吗？@haxxxton ok。我加了一张照片。正如我所说，我唯一还没有解决的问题是文本的垂直对齐。虽然我觉得html中所有嵌套的div is span都是一个草率的代码。可以写得更干净，但是你要找的是

垂直对齐：中间

或

行高：px

.hmm。我尝试了垂直对齐：中间；，从来没有想到过托普。成功了，谢谢你。你能解释为什么中间不起作用，但顶端会把它放在中间吗？默认情况下，它会将NaviLink的基线与它的父元素的基线对齐。设置“垂直对齐顶部”将使元素的顶部与线上最高元素的顶部对齐。垂直对齐中间将使元素在其父容器的中间对齐，使其仅从中间开始。您可以近距离使用此Ahh。看起来不错，但我需要在左边的箭头和箭头后的文本中心。我使用像php这样的后端代码做得更好，前端设计不是我的强项。你能告诉我如何翻转箭头并使文字居中吗？谢谢@Zaper127，更新。这是一个完全不同的世界：）这里绝对没有判断，这是完美的。谢谢你，伙计。我花了一整天的时间只是为了到达我所在的地方。CSS3有很多很酷的新特性。希望我能熟练地使用它们。@ ZPAR127，不客气，请考虑将答案标注为解决方案。抱歉，忘了这么做。