Css 如何保持内容垂直居中,并使用滚动条显示任何垂直溢出?
我有一个内容区域,其行为应如下所示:Css 如何保持内容垂直居中,并使用滚动条显示任何垂直溢出?,css,Css,我有一个内容区域,其行为应如下所示: 如果没有垂直溢出,内容将垂直居中(当前通过显示:table/-cell) 除非存在垂直溢出,否则不会显示滚动条 包含div的高度永远不会更改 我只能满足第一点-小提琴: <div class="row-fluid card-box"> <div class="span4 side-study-box"> <div class="side-box-content"> &l
- 如果没有垂直溢出,内容将垂直居中(当前通过
)显示:table/-cell
- 除非存在垂直溢出,否则不会显示滚动条
- 包含div的高度永远不会更改
<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>
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px !important;
max-height: 160px !important;
display: table !important;
margin: 0px !important;
margin-left: -1px !important;
position: relative;
overflow-y: scroll !important;
}
.side-study-box .side-box-content {
width: calc(100%);
height: 160px !important;
float: right;
display: table;
overflow-y: scroll !important;
background-color: white;
}
/*#region CONTENT AREAS */
/*#region TEXT CONTENT */
.side-study-box .text-content-saved {
width: calc(100%+29px) !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;
border: 0px !important;
overflow-y: scroll !important;
}
这是我的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>
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px !important;
max-height: 160px !important;
display: table !important;
margin: 0px !important;
margin-left: -1px !important;
position: relative;
overflow-y: scroll !important;
}
.side-study-box .side-box-content {
width: calc(100%);
height: 160px !important;
float: right;
display: table;
overflow-y: scroll !important;
background-color: white;
}
/*#region CONTENT AREAS */
/*#region TEXT CONTENT */
.side-study-box .text-content-saved {
width: calc(100%+29px) !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;
border: 0px !important;
overflow-y: scroll !important;
}
这可以通过使用一些基本的CSS和一点jQuery来实现 看看我的小提琴。请随意填充内容,使其更大,并查看ti的反应 HTML
<div id="holder">
<div id="text">
test<br/>
test<br/>
test<br/>
test
</div>
</div>
JQuery
var holder = $('#holder');
var text = $('#text');
if (text.height()<holder.height()){
var y=(holder.height()/2) - (text.height()/2);
text.css({top:y+'px'});
}
var holder=$(“#holder”);
var text=$(“#text”);
if(text.height()