Question

我想要有如下内容
对于第一个我使用行高40px

enter image description here 对于第二个我使用行高120px

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

我可以在没有Javascript的情况下执行此操作吗？如果我使用高度120px我得到像这样的div（我不想要这个） enter image description here

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>

Answer 1

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

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

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

Answer 2

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

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

Answer 3

即使高度和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;
    }

Answer 4

垂直对齐仅在表＆gt; tr＆gt; td中完美地工作。对于其他人，您也可以尝试从顶部和底部填充。这不需要任何垂直对齐，只会做得最好。

由于拉胡

在固定的Dimensional div中将内容水平和垂直居中

4 个答案: