如何在不使用 inline-height 的情况下垂直对齐 div 内的文本答案

【问题标题】：How to vertically align text inside div without using inline-height如何在不使用 inline-height 的情况下垂直对齐 div 内的文本
【发布时间】：2012-07-04 07:24:50
【问题描述】：

在下面的示例中，我尝试将中间的文本垂直和水平对齐。

由于某种原因它没有正确出现，我也尝试了一些示例

http://jsfiddle.net/kayen/JBnbG/

【问题讨论】：

标签： css webforms text-alignment

【解决方案1】：

你可以添加到你的css

text-align: center;
line-height: 30px;

http://jsfiddle.net/JBnbG/4/

【讨论】：

我在没有使用 inline-height 的情况下提到了问题本身，我尝试了这种方法，但是如果标题很大则会出现问题，然后由于 inline-heigh:30px 而不会显示；跨度>

【解决方案2】：

演示http://jsfiddle.net/AMcnZ/22/

第二次演示http://jsfiddle.net/AMcnZ/32/

.boxcaption{
        float: left;
        position: absolute;
        background: #000;
        height: 25px;
        width: 100%;
        opacity: .6;
        padding-top:3px;
       text-align:center;
        /* For IE 5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
        /* For IE 8 */
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
         }

【讨论】：

看看如果我添加大标题jsfiddle.net/AMcnZ/27会发生什么。它不换行
@KnowledgeSeeker : 如果标题很大而图像宽度很小，你怎么能解决这个问题，选项是你必须改变字体大小，这是不好的选择
标题不会很大，但至少应该可以调整两行。
即使我添加小字体jsfiddle.net/AMcnZ/33..我想在不添加填充的情况下这样做，您也会看到这种方法存在设计问题..

【解决方案3】：

您可以使用 CSS 执行以下操作并获得结果：http://jsfiddle.net/surendraVsingh/AMcnZ/31/

从.boxcaption 中删除height。

.boxcaption{
    float: left;
    position: absolute;
    background: #000;
    width: 100%;
    text-align:center; /*Add this*/
    padding:5px 0 0 0; /*Add this*/
    opacity: .6;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

【讨论】：

是的，因为框标题有固定的高度。
那么我该如何解决这个问题
我认为更好的解决方案是删除高度并让它随着图像标题增长，我会将您的答案标记为正确，因为其他用户已经给出了类似的解决方案，但您是第一个这样做的方式。感谢大家的帮助。