Question

我有一个左右两边的网站。但我无法将正确的方框内容放在右侧框中。

我无法真正更改容器css，因为整个站点将崩溃，因为该站点是使用Jquery构建的。但现在我无法将我的内容框垂直和水平放在右框中。

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%;
}

Answer 1

你需要添加底部：0;和顶部：0;到你的#f_container

#f_container {
position: absolute;
margin: auto;
height:120px; 
width:600px;
bottom:0;
top:0;
}

Answer 2

尝试在#f_container css中添加padding-top:280px; @Edit演示：http://jsfiddle.net/ndEXN/2/

Answer 3

为您的合适容器#f_content提供position:absolute;

并为您的#f_container提供

top:50%; 
position:relative;

检查一下 http://jsfiddle.net/ndEXN/4/

我希望这可以提供帮助另外我认为这可能有助于你理解

http://phrogz.net/css/vertical-align/

Answer 4

在右侧div使用Vertical-align:middle;。它应该工作

我无法将我的内容垂直放在右侧框中

4 个答案: