Question

我在div中将文本居中时遇到了一些麻烦。文本“项目描述”比其他选项略长，因此它显示在两行上。

以下是负责此事的代码：

.left-menu {
    float: left;
    width: 109px;
    margin-right: 33px;

}

.left-menu .button {
    width: 108px;
    height: 64px;   
    background-color: #E6E6E6;  
    margin-bottom: 32px;
    text-align: center;
}

.left-menu .button a {
    font-size: 18px;
    font-weight: bold;
    line-height: 64px;
    color: #00359F;
    text-decoration: none;
}

这里是fiddle。

如何在“项目”一词之后显示“描述”一词？

谢谢！

Answer 1

在CSS文件中更新这些规则：

.left-menu .button {
    width: 108px;   
    background-color: #E6E6E6;  
    margin-bottom: 32px;
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;
}

.left-menu .button a {
    font-size: 18px;
    font-weight: bold;
    color: #00359F;
    line-height: 1.2em;
    text-decoration: none;
}

我已经更改了a上的行高并删除了按钮上的固定高度，因为它可以更好地实现您填充后的效果。请参阅此链接以查看有效版本https://jsfiddle.net/sukky4r3/2/

Answer 2

我已经更新了你的小提琴以匹配你想要的东西。您所要做的只是调整line-height上的.left-menu .button a属性以匹配您想要的确切间距，我已将其设置为30px以使其成为看起来好吧＆＃39;现在。

这样做的方法是使用表格，使用.left-menu .button制作display: table; .left-menu .button a及其小孩display: table-cell; vertical-align: middle;垂直居中多条线。

你的CSS看起来像这样

.left-menu .button {
    width: 108px;
    height: 64px;   
    background-color: #E6E6E6;  
    margin-bottom: 32px;
    text-align: center;
    display: table; // make the display table here.
}

.left-menu .button a {
    font-size: 18px;
    font-weight: bold;
    line-height: 30px; // adjusted line-height so that multiple lines fit in one menu.
    color: #00359F;
    text-decoration: none;
    display: table-cell; // child has to be table-cell
    vertical-align: middle; // this vertically centers the text
}

fiddle here
css欺骗关于这个主题的文章here

在div内的两行中心文本

2 个答案: