我有一个左右两侧的网站。但我无法将右框的内容放在右框的中心。
我无法真正更改容器 css，因为那样整个站点将崩溃，因为该站点是使用 Jquery 构建的。但是现在我无法让我的内容框在 RIGHT 框中垂直和水平居中。
jsFiddle：http: //jsfiddle.net/ndEXN/
HTML
<!-- LEFT -->
<div id="left">
<div id="t_content">
<div id="t_container">
<div id="t1_b1">Random title I</div>
<div id="t1_b2">Random text I</div>
</div>
</div>
</div>
<!-- RIGHT -->
<div id="right">
<div id="f_content">
<div id="f_container">
<div id="f1_b1">Random title II</div>
<div id="f1_b2">Random text II</div>
</div>
</div>
</div>
CSS
html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
overflow: hidden;
}
#left {
width: 50%;
height: 100%;
background-color: #6e0e10;
float: left;
cursor: pointer;
position: absolute;
overflow:hidden
}
#t_container {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:120px;
width:600px;
}
#t1_b1 {
background: #000000;
opacity: 0.95;
color: #FFF;
width: 105px;
height: 50px;
margin-bottom: 10px;
float:left;
margin-left: 247px;
}
#t1_b2 {
background: #000000;
opacity: 0.95;
color: #FFF;
width: 400px;
height: 50px;
margin-bottom: 10px;
float:left;
margin-left: 100px;
}
#t_content {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 100%;
}
#right {
width: 50%;
height: 100%;
background-color: #130e6e;
background-position: right;
float: right;
cursor: pointer;
overflow: hidden;
}
#f_container {
position: absolute;
margin: auto;
height:120px;
width:600px;
}
#f1_b1 {
background: #000000;
opacity: 0.95;
color: #FFF;
width: 105px;
height: 50px;
margin-bottom: 10px;
float:left;
margin-left: 247px;
}
#f1_b2 {
background: #000000;
opacity: 0.95;
color: #FFF;
width: 400px;
height: 50px;
margin-bottom: 10px;
float:left;
margin-left: 100px;
}
#f_content {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 100%;
}