2

問題：

一部のコンテンツを垂直方向に中央揃えするには、(display:table親 div で) と(含まれる div で)を使用する必要があります。display:table-cellこれは、コンテンツが垂直にオーバーフローする場合を除いて機能しています。垂直オーバーフローがある場合にスクロールバーが表示されるように、高さを制限したい。

フィドル:

http://jsfiddle.net/PTSkR/110/

（出力では、高さを160pxに設定しているにもかかわらず、divが垂直に展開されていることに注意してください）

CSS: 

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

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

    .side-study-box .text-content-saved {
        width: 100% !important;
        font-size: 24px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        height: 160px !important;
        max-height: 160px !important;
        background-color: white;
        padding: 0px !important;
        margin: 0px !important;
        font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
        border: 0px !important;
        overflow-y: scroll;
    }
4

1 に答える 1

1

ここにあなたのフィドルが更新され、コンテンツラッパーに最大高さが設定されています。 

.side-study-box {
    background-color: white;
    color: black;
    border: 1px solid #3D6AA2;
    display: table;
    width: 100%;
    border-spacing:1em;
}
.side-box-content {
width: 100%;
  height: ;
   display: table-cell;
}
.text-content-saved {
   max-height:160px;
   overflow:auto;
    padding:5px;
}

http://jsfiddle.net/GCyrillus/6tLAu/

ここまでの最初のコードは次のとおりです。ボックスは大きくなりません。
down here second は最初に行い、コンテンツが少ない場合は中央に配置します。

.side-study-box {
    background-color: white;
    color: black;
    border: 1px solid #3D6AA2;
    display: table;
    width: 100%;
    border-spacing:1em;
    height:160px;
}
.side-box-content {
width: 100%;
  height: ;
   display: table-cell;
    vertical-align:middle;
}
.text-content-saved {
   max-height:140px;
   overflow:auto;
    padding:5px;
}
于 2013-06-04T01:17:17.503 に答える