[英]CSS vertical align inside a FIXED position div
我有一个标题:固定位置。
这是css:
#header{
position:fixed;
height: 6em;
display:block;
width: 100%;
background: rgba(255, 255, 255, 1);
z-index:9;
text-align:center;
color: #000000;
}
在里面,我想把文本中间和垂直中间。 这是我到目前为止所做的,但它不起作用。 所有示例在线显示绝对位置作为容器,但它不适用于固定的容器。
HTML:
<div id="header">
<div id="bandname">Bewolf Photography</div>
<div id="insta"><img src="imgs/insta.png" width="40" alt="tablets" /></div>
<div id="bandname">Bewolf Photography</div>
</div>
用于文本和图像的CSS:
#bandname
{
display: inline-block;
font-size: 2.8em;
padding: 0px 0px 0 0;
vertical-align: middle;
background: rgba(0, 255, 0, 1);
}
#insta {
display: inline-block;
padding: 0px 0px 0px 50px;
vertical-align: middle;
}
我只是想不出那个...
我试过用
line-height: 6em;
帮助将不胜感激..谢谢,但这也无济于事。
使用伪元素垂直中心技巧。
#header:before
将内联元素下移到中心。 标题的直接子节点display: inline-block
和vertical-align: middle
保持直线。
这项技术基本上会在您的其他内容之前添加“div”。 (如果你真的需要在IE7及以下版本中使用它,可以用真正的<div>
替换。[不要打扰!])。 它基本上看起来像这样:
<div class="header">
<!-- added by css -->
<div>I am :before and you will all do as I say! To the middle, plebs!</div>
<!-- end css content -->
<div>Yes master!</div>
<div>Anything you say sir!</div>
</div>
注意:我从图像周围删除了div。 这似乎是不必要的,但如果需要必须放回去。 另外,我只使用直接子选择器来定位#header
的直接子节点: >
。 这是一个庞大的CSS选择器列表。
#header { position: fixed; height: 6em; display: block; width: 100%; background: rgb(0, 255, 255); /* Fall-back for browsers that don't support rgba */ background: rgba(0, 255, 255, 1); z-index: 9; text-align: center; color: #000000; top: 0px; } #header:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } #header > div, #header > img { display: inline-block; font-size: 2.8em; padding: 0px 0px 0 0; vertical-align: middle; }
<div id="header"> <div id="bandname">Test</div> <img src="http://www.placehold.it/50" width="40" alt="tablets" /> <div id="bandname">test</div> </div>
最简单的解决方案是为其内容提供以下css。
#header .wrapper
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
由于有多个子节点,最好将它们包装在包装器div周围。 这是工作示例:
您可以使用left
, right
, top
和bottom
属性,例如将em设置为50%,并使用transform属性将元素的-50% translate
为完美居中。 听起来很混乱,但我做了一个小提琴: http : //jsfiddle.net/zzztfkwu/这会有用吗?
编辑: http : //jsfiddle.net/kbh97n82/1更新了.wrapper解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.