Question

我有一个标题：固定位置。

这是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 for text and image：

#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;

帮助将不胜感激..谢谢但那也不起作用。

Answer 1

使用伪元素垂直中心技巧。

#header:before将内联元素放到中心位置。标题的直接子节点被赋予display: inline-block和vertical-align: middle以保持直线。

工作示例

注意：我从图像周围删除了div。这似乎是不必要的，但如果需要必须放回去。此外，我仅使用直接子选择器#header定位>的直接子项。#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; }。 Here is a huge list of CSS selectors.

<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>

{{1}}

Answer 2

最简单的解决方案是为其内容提供以下css。

#header .wrapper
{
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

由于有多个子节点，最好将它们包装在包装器div周围。这是工作示例：

http://jsfiddle.net/zf987w0b/1/

Answer 3

您可以使用属性left，right，top和bottom，例如将em设置为50％，并使用transform属性{{1元素-50％本身可以完美地居中。听起来很混乱，但我做了一个小提琴：http://jsfiddle.net/zzztfkwu/这会起作用吗？

编辑： http://jsfiddle.net/kbh97n82/1更新了.wrapper解决方案。

CSS垂直对齐在FIXED位置div内

3 个答案:

工作示例