左と右の2つの側面からウェブサイトを持っています。しかし、正しいボックスのコンテンツを正しいボックスの中央に配置することはできません。
サイトがJqueryで構築されているため、コンテナcssを実際に変更することはできません。サイト全体が崩壊するからです。しかし、コンテンツ ボックスを右ボックスの垂直方向および水平方向の中央に配置できません。
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%;
}