【问题标题】: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)";
    }
    

    【讨论】:

    • 是的,因为框标题有固定的高度。
    • 那么我该如何解决这个问题
    • 我认为更好的解决方案是删除高度并让它随着图像标题增长,我会将您的答案标记为正确,因为其他用户已经给出了类似的解决方案,但您是第一个这样做的方式。感谢大家的帮助。
    猜你喜欢
    • 1970-01-01
    • 2012-02-06
    • 2014-10-19
    • 1970-01-01
    • 2019-06-29
    • 1970-01-01
    • 2015-11-22
    • 1970-01-01
    • 2014-05-23
    相关资源
    最近更新 更多