4

我想
1 为第一个使用 line-height 40px 的内容提供如下内容

在此处输入图像描述 对于第二个我使用 line-height 120px

这意味着随着内容的变化我必须改变行高有没有办法在不改变类的情况下在固定维度的 div 中进行这种类型的居中

我可以在没有 Javascript 的情况下做到这一点吗？如果我将高度用作 120px，我会得到这样的 div （我不想要这个） 在此处输入图像描述

div 的样式是

<style>
 .rectangle {
        postion:absolute;
    box-shadow: 10px #333;
    border-radius: 23px;
    border-top-right-radius: 0;
    border:6px solid;
    block:inline;
    line-height: 123.6px;
    width:200px;
    background-color: #444;
    float: left;
    margin: 5px;
    text-align: center;
    color:white;
   font-weight:900;

    text-decoration:none;
}
</style>
4

4 回答 4

2

垂直居中是棘手的。CSS 技巧的 Chris Coyier 对此有一篇很棒的文章 - http://css-tricks.com/centering-in-the-unknown/

我个人的偏好是 ghost 伪元素，但它只在 IE8+ 中可用，因此如果需要旧版 IE 支持，您可能需要查看其他一些示例。

这是一个工作小提琴 - http://jsfiddle.net/tommarshall/eGJQC/3/

于 2012-09-06T11:50:55.197 回答
1

使 .rectangle 元素显示为表格，内部文本段落显示为表格单元格。然后，您可以轻松地垂直放置您的段落。

这是一个工作示例：http: //jsfiddle.net/ktzUn/

于 2012-09-06T12:00:14.180 回答
0

即使高度和 div 中的内容不同，以下 css 也能正常工作 

.rectangle 
      {
        height:auto;
        postion:absolute;
        box-shadow: 10px #333;
        border-radius: 23px;
        border-top-right-radius: 0;
        border:6px solid;
        block:inline;
        width:200px;
        background-color: #444;
        float: left; padding:20px 10px 20px 10px;
        margin: 5px;
        text-align: center;
        color:white;
        font-weight:900;
        text-decoration:none;
    }
于 2012-09-06T12:00:34.853 回答
0

垂直对齐仅在 table>tr>td 中完美工作。对于其他人，您也可以尝试从顶部和底部提供填充。这不需要任何垂直对齐，并且效果最好。

谢谢拉胡尔

于 2012-09-06T14:40:24.473 回答