1

我的外部 div 是 position:relative ，内部 div 是绝对定位的。

我想设置我的内部 div 中心垂直对齐并考虑使用 top:auto 和 bottom:auto 但它不起作用。请告诉我如何做到这一点。

        div.Container div.Right 
    {
            width:50%;
            float:right ;
            border: 01px dashed green;
            height:95px !important;    
            position:relative !important;
    }   

     div.header-search
    {    
        overflow:auto;
        display:inline;    
        border:0px dashed blue;        
        position:absolute;
        top:auto;
        bottom:auto;
        right:0px;
    }



 <div class="Right">
            <div class="header-search">
                <input type="text" class="searchbox" />
                <input type="button" class="searchbutton" value="›" />
            </div>
</div>
4

7 回答 7

1

您可以像这样line-height:95px;在外部 div 和vertical-align: middle;内部 div 中使用：

div.Right
{
    width:50%;
    float:right ;
    border: 01px dashed green;
    line-height:95px !important;   
    display: block;
}   

div.header-search
{    
    overflow:auto;
    border:0px dashed blue;       
    vertical-align: middle;
}

你可以在这里玩它：http: //jsfiddle.net/leniel/5Mm67/

如果要水平对齐内部 div 的内容，只需将其添加到div.Right：

text-align: center;

结果如下：http: //jsfiddle.net/leniel/5Mm67/1/

于 2012-10-20T21:28:01.647 回答
0

这应该有效：

div.header-search
{    
    overflow:auto;
    display:inline;    
    border:0px dashed blue;        
    position:absolute;
    top:50%;
    right:0px;
}
于 2012-10-20T21:36:58.923 回答
0

在 div 中设置绝对位置：“top:50%;”

它会将 div 显示得稍微低一点（绝对 div 应该正好在父高度的 50% - 相对 div 上），但是有一些方法可以解决这个问题。

例如：使用相对位置再做一个 div 并将其移动到更高绝对 div 高度的一半（这在代码中看起来不太好） - 你必须知道 div 的高度，如果你不知道你可以像 jQuery 一样测量大小并将 div 移高一点。

最简单的方法：也许尝试 45% 而不是 50%（如果它不是像素到像素的设计）。

可能有人有更好的解决方案，如果是这样，我希望看到他们:)

于 2012-10-20T21:35:54.293 回答
0

嗨，有几种方法可以通过 CSS 的魔力实现 div 的垂直居中。这是示例，我已经测试过它工作正常......而且工作正常。

HTML：

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS：

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

这里是其他方法点击这里查看完整的参考 希望，它会帮助你。干杯。！！

于 2012-10-21T06:48:25.303 回答
0

实现您所追求的最佳方法是删除bottom:auto;样式并替换top:auto;为top:50%;. 之后计算出您试图居中的搜索栏的高度（比如它的 20px）并为其高度的一半添加负边距样式，所以如果它是 20px 样式将是margin-top:-10px;

你的CSS看起来像这样：

 div.header-search
{    
    overflow:auto;
    display:inline;    
    border:0px dashed blue;        
    position:absolute;
    top:50%;
height:20px;
margin-top:-10px;
right:0;

}​
于 2012-10-20T21:27:38.170 回答
0

将 .header-search 设置为 top:50% 或 bottom:50% 然后使用 margin-top:-(div 高度的一半) 或 margin-bottom:-(div 高度的一半); 分别。我有时也只是简单地使用 top:50% 或 bottom:50% 而没有负边距。

例如：

 div.header-search
    {    
        overflow:auto;
        display:inline;    
        border:0px dashed blue;        
        position:absolute;
        top:50%;
        height: 500px;
        margin-top:-250px;
        right:0px;
    }

所以是的，在这种情况下，你必须设置一个固定的高度。

于 2012-10-20T21:27:54.183 回答
-1

尝试将内部 div 设置为 margin: auto 0;

于 2012-10-20T21:25:40.347 回答