Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css div元素不在另一个div元素的中间对齐_Css_Html_Block_Vertical Alignment - Fatal编程技术网
Fatal编程技术网
  • css/
  • Css div元素不在另一个div元素的中间对齐

Css div元素不在另一个div元素的中间对齐

css html

Css div元素不在另一个div元素的中间对齐,css,html,block,vertical-alignment,Css,Html,Block,Vertical Alignment,这是我的相关页面标记： <div id="header"> <div id="logo"> <a href="/">Home</a> </div> <div id="user_box"> test </div> </div> 现在，我想将user\u框div放置在标题div的垂直中间。经过大量的谷歌搜索和实验，我发现这并不容易。显然，我

这是我的相关页面标记：

<div id="header">
    <div id="logo">
        <a href="/">Home</a>
    </div>
    <div id="user_box">
        test
    </div>
</div>
现在，我想将
user\u框
div放置在
标题
div的垂直中间。经过大量的谷歌搜索和实验，我发现这并不容易。显然，我不能垂直对齐块元素，比如div。所以我正在寻找一种不同的方法来实现这一点

我看到了hacky
显示：tablespan
，但也没有成功。我甚至尝试使用
边距：auto 0
所以我请求帮助。如何在标题div内垂直对齐此div


谢谢
 将
用户框的行高设置为等于
标题的高度


工作演示：
垂直对齐不适用于用于对齐表中元素的div。在你的情况下，你可以用这个


    #user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/



所以我稍微修改了一下你的代码，我得到的是：

如您所见，我使用一个表作为标题，并对每个元素应用相同的id，但两个内部div已更改为td。我添加了一个内部td来补偿两个div之间的空间，因为它们最初设置为float:left/right


（当然，边框只是为了显示实际情况。）
您可能希望使用
display:table cell，以便可以将
垂直对齐：中间
css属性，但这种显示类型会弄乱很多东西。这只会将
#user_box
中的文本居中，而不是实际的div。请参阅：这就是
#user_box
中的所有内容居中：）

    #user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/