问保持内容垂直中心只有CSS？
EN

Stack Overflow用户

提问于 2013-06-07 02:34:17

回答 1查看 110关注 0票数 0

我有一个内容区域，应该以以下方式进行操作：

如果没有垂直溢出(目前通过display:table/-cell实现)，内容将垂直居中。
除非存在垂直溢出，否则不显示滚动条。
包含的div的高度不会改变。

我只满足了第一点--小提琴：

http://jsfiddle.net/PTSkR/125/

这里是我的html:

<div class="row-fluid card-box">

    <div class="span4 side-study-box">
        <div class="side-box-content">
            <pre class="text-content-saved">TEST 
           TEST</pre>
            </div>
        </div>
</div>

Css:

.side-study-box {
    background-color: white;
    color: black;
    border: 1px solid #3D6AA2;
    text-align: center;
    height: 160px;
    max-height: 160px;
    display: table ;
    margin: 0px ;
    margin-left: -1px;
    position: relative;
    overflow-y: scroll ;
}

    .side-study-box .side-box-content {
        width: calc(100%);
        height: 160px;
        float: right;
        display: table;
        overflow-y: scroll ;
        background-color: white;
    }

    /*#region CONTENT AREAS */

    /*#region TEXT CONTENT */
    .side-study-box .text-content-saved {
        width: calc(100%+29px);
        font-size: 24px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        height: 160px !important;
        max-height: 160px ;
        background-color: white;
        padding: 0px ;
        margin: 0px ;
        border: 0px ;
        overflow-y: scroll;
    }

不幸的是我不能用js作为解决方案的一部分..。这有可能只使用css吗？

css

回答 1

Stack Overflow用户

发布于 2013-06-07 02:37:16

您可以使用overflow:auto;实现第二点，并设置以下内容：

分词:正常！重要；单词包装:正常！重要；空格:重要！重要；

小提琴：http://jsfiddle.net/PTSkR/134/

请记住，由于您使用的是pre标记，这意味着所有的空格和换行格式都是计数的，因此任何空白或额外的行都可能导致溢出，您可能会忽略这一点。请参阅这里

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16975380

复制

相似问题

问保持内容垂直中心只有CSS？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问保持内容垂直中心只有CSS？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问保持内容垂直中心只有CSS？
EN