在固定尺寸的div中水平垂直居中内容

Question

我希望您能提供以下内容：
第一个图片的行高为40px。 第二个图片的行高为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>

- madhu131313

---

你能让我们看看你写的代码吗？ - vivek salve

感谢您的评论。我已经添加了那个CSS样式。 - madhu131313

http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html - Jawad

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - Jawad

block:inline;？没有这个属性。也许是display: block;，display: inline-block;。 - Jawad

Answer 1

竖直居中是有技巧的。Chris Coyier在CSS Tricks网站上写了一篇很好的文章 - http://css-tricks.com/centering-in-the-unknown/

我个人偏好使用ghost伪元素，但它只适用于IE8+，因此如果需要支持旧版IE，则需要查看其他示例。

这里有一个可工作的代码片段 - http://jsfiddle.net/tommarshall/eGJQC/3/

- tommarshall

Answer 2

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

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

- alexbusu

---

请注意，此代码在IE7及以下版本中无法正常工作，而IE8在使用“display:table;”时会出现奇怪的行为。 - David Barker

随着内容的增加，div 的高度也在增加 http://jsfiddle.net/ktzUn/ - madhu131313

David，IE7及以下版本确实如此；IE8需要一个！DOCTYPE声明。 Madhu13，你期望什么？ - alexbusu

Answer 3

垂直对齐仅在table>tr>td中完美运作。对于其他情况，您也可以尝试从顶部和底部给予填充。这不需要任何垂直对齐，并且将最简单地起作用。

谢谢 Rahul

- Rahul

Answer 4

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

- vivek salve

---

block:inline 是用于将块元素更改为内联元素的CSS属性。http://www.w3schools.com/cssref/pr_class_display.asp - madhu131313

block:inline;？没有这个属性。也许是display:block;，display:inline-block;。 - Jawad