CSS垂直对齐：文本底部；

您好，我正在尝试将文本定位到

的底部。既不

垂直对齐：文本底部或
垂直对齐：底部

问题是下面是我的导航按钮，如果我按下它，它们就会失去对齐

有没有一种方法可以让我的CSS解决这个问题

a:link{color:#452809}
a:悬停{文本装饰：下划线；颜色：#f00}
a:访问{color:#3886e0}
.fleft{float:left}
.fright{float:对}
.clear{clear:两个}
*{边框：0；边距：0}
**正文{字体：12px Tahoma，Arial，Helvetica，无衬线；颜色：#666；背景：#3cb40d}
#主{页边距：0自动；宽度：780px；背景：#fff url（images/vitalbodyhealth.gif）无重复中心顶部}
#标题{宽度：780px；边距：10px；高度：210px}
#徽标{右侧填充：10px；文本对齐：右侧；底部填充：9px；高度：150px；垂直对齐：文本底部}
#徽标a{文本装饰：无；文本转换：小写；字体样式：斜体；字体大小：16px；颜色：#fff；字体重量：粗体}
#logo H2 a{字体大小：10px}
#按钮{填充顶部：0px；高度：40px；宽度：780px}
#按钮li{显示：内联}
#按钮a{显示：块；浮动：左；宽度：80px；高度：26px；文本对齐：居中；文本装饰：无；颜色：#fff；字体重量：粗体；字体大小：14px；填充顶部：0px；左边距：12px}
#按钮a：悬停{宽度：80px；高度：36px；文本装饰：下划线}
#内容{宽度：720px；边距：0自动；填充：20px}**
.inner_copy{边框：0；颜色：f00；浮点：右；宽度：50%！重要；边距：-100%0；溢出：隐藏；行高：0；填充：0；字体大小：11px}
#左{宽度：450px；填充：10px；背景：#efef}
#左H1，#左H2{颜色：#3cb40d；边距：0}
#左H1{字体大小：24px；填充：0}
#左H2{字体大小：18px；填充顶部：10px}
#左a{color:#3886e0}
#左a:悬停{文本装饰：无；颜色：#f00}
#左a：已访问{color:#3886e0}
#右{浮点：右；宽度：240px；背景：#efef}
#边栏{宽度：240px；背景：#efef}
#边栏ul{边距：0；填充：0；列表样式：无}
#侧边栏li{页边距底部：15px}
#侧边栏li ul{填充：10px；边框顶部：无}
#侧边栏li{边距：0；填充：3px 0}
#侧边栏LIH2{高度：36px；边距：0；填充：10px 0 0 20px；背景：#47872B；字体大小：18px；颜色：#fff}
#侧栏a:链接，#侧栏a:已访问{文本装饰：无}
#侧边栏a:悬停{文本装饰：下划线}
#侧边栏li a{左侧填充：10px；背景：url（images/img09.gif）不重复1px 5px}
#页脚{背景：#452809；高度：47px；宽度：780px；边距：0自动；字体大小：10px；颜色：#fff；填充顶部：23px；文本对齐：中心；}
#页脚div{padding:10px 38px}
#页脚a{color:#fff；字体大小：10px；文本装饰：无}
.padding{padding:10px；颜色：#f00；字体大小：粗体}

任何帮助都将不胜感激

：）
垂直对齐仅在某些特定情况下有效。最简单的方法是在父元素的CSS中设置
display:table
，并设置
display:table单元格到子元素，然后应用垂直对齐属性。
如果文本没有溢出两行，则可以执行
行高：
在CSS中，您给出的线条高度越高，容器上的线条就越低。
要正确使用
垂直对齐
，您应该在
表格
标签上进行。但是，有一种方法可以使其他html标记像表一样工作，方法是将
display:table
的css分配给您的父标记，并将
display:table cell
分配给您的子标记。然后
verticalalign:bottom
将对该子项起作用

HTML:

下面是一个实例：
现代解决方案
Flexbox正是针对这类问题创建的：


#容器{
高度：150px；/*仅用于演示*/
背景色：绿色；/*仅用于演示*/
显示器：flex；
证明内容：中心；
对齐项目：柔性端；
}

文本对齐到中心底部。
有时您可以使用填充和边距顶部，添加线条高度等

看

从@aspirinemaga分叉的样式和文本

.parent
{
    width:300px;
    line-height:30px;
    border:1px solid red;
    padding-top:20px;
}

我们也可以用html吗？这可能有助于诊断问题。我们还需要查看您的HTML。作为一个活生生的例子，我们将更容易帮助您。用于-jsbin.com或jsfiddle.nett感谢您的回复。这打开了一个真正的蠕虫罐头，因为应该在下面的导航按钮被移动到顶部。我认为问题在于横幅上画有绿色条，因此导航按钮很好地安装到位。Jees我是个傻瓜。如果是我，我会用jsut来代替
行高
，它也可以工作，而且很简单，就像我建议的那样。flex解决方案只在增加高度的情况下对我有效。
​.parent {
    width: 300px;
    height: 50px;
    display:​ table;
    border: 1px solid red;
}
.child { 
    display: table-cell;
    vertical-align: bottom;
}​

.parent
{
    width:300px;
    line-height:30px;
    border:1px solid red;
    padding-top:20px;
}