我有一个div有两个图像和一个h1.所有这些都需要在div内垂直对齐,彼此相邻.

其中一个图像需要absolute放在div中.

在所有常见浏览器上工作所需的CSS是什么？

    
    
testing...
    

Konrad Rudol.. 872

哇,这个问题很受欢迎.这是基于对vertical-align房产的误解.这篇优秀的文章解释了它:

vertical-alignGavin Kistner 理解或"如何(不)垂直居中".

"如何以CSS为中心"是一个很棒的网络工具,它有助于为不同的情况找到必要的CSS居中属性.

简而言之_{^{(并防止链接腐烂)}}:

内联元素(以及仅内联元素)可以在其上下文中垂直对齐vertical-align: middle.但是,"context"不是整个父容器的高度,而是它们所在的文本行的高度.jsfiddle示例

对于块元素,垂直对齐更难,并且在很大程度上取决于具体情况:

如果内部元件可以有一个固定的高度,可以使自己的立场absolute,并指定其height,margin-top和top位置.jsfiddle的例子

如果居中元素由一条线组成 并且 其父高度是固定的,则可以简单地设置容器line-height以填充其高度.根据我的经验,这种方法非常通用.jsfiddle的例子

......还有更多这样的特殊情况.

"有效"解决方案的问题(所以不是`vertical-align:middle`)是你必须指定一个固定的高度._Responsive Web Design_不太可能. (126认同)

这也适用于`inline-block`和`table-cell`元素.如果您遇到此问题,请尝试调整容器元素的"line-height"(即上下文),因为它用于`vertical-align`行框计算. (8认同)

E. Serrano.. 149

现在Flexbox支持正在增加,应用于包含元素的CSS将垂直居中包含的项:

.container {        
    display: flex;
    align-items: center;
}

如果您还需要定位Explorer 10和旧的(<4.4)Android浏览器,请使用带前缀的版本:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

小智.. 109

我使用了这个非常简单的代码:

HTML:

    

        
Some txt
        
bla bla bla
    

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

显然,无论你使用a .class还是an #id,结果都不会改变.

哇,这个问题很受欢迎.这是基于对vertical-align房产的误解.这篇优秀的文章解释了它:

vertical-alignGavin Kistner 理解或"如何(不)垂直居中".

"如何以CSS为中心"是一个很棒的网络工具,它有助于为不同的情况找到必要的CSS居中属性.

简而言之_{^{(并防止链接腐烂)}}:

内联元素(以及仅内联元素)可以在其上下文中垂直对齐vertical-align: middle.但是,"context"不是整个父容器的高度,而是它们所在的文本行的高度.jsfiddle示例

对于块元素,垂直对齐更难,并且在很大程度上取决于具体情况:

如果内部元件可以有一个固定的高度,可以使自己的立场absolute,并指定其height,margin-top和top位置.jsfiddle的例子

如果居中元素由一条线组成 并且 其父高度是固定的,则可以简单地设置容器line-height以填充其高度.根据我的经验,这种方法非常通用.jsfiddle的例子

......还有更多这样的特殊情况.

现在Flexbox支持正在增加,应用于包含元素的CSS将垂直居中包含的项:

.container {        
    display: flex;
    align-items: center;
}

如果您还需要定位Explorer 10和旧的(<4.4)Android浏览器,请使用带前缀的版本:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

我使用了这个非常简单的代码:

HTML:

    

        
Some txt
        
bla bla bla
    

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

显然,无论你使用a .class还是an #id,结果都不会改变.

它对我有用:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

我朋友的一项技巧:

HTML:

    
I'm vertically centered.

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO在这里

要将块元素定位到中心(在IE9及以上版本中工作),需要一个包装器div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

所有这些都需要在div中垂直对齐

对齐怎么样？图像的顶部与文本顶部对齐？

其中一个图像需要在div中绝对定位.

相对于DIV绝对定位？也许你可以勾勒出你正在寻找的东西......？

fd描述了绝对定位的步骤,以及调整H1元素的显示,使图像与其内嵌.为此,我将添加您可以使用vertical-align样式对齐图像:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

...这会将标题和图像放在一起,顶边对齐.存在其他对齐选项; 看文档.您可能还会发现删除DIV并在H1元素内移动图像是有益的- 这为容器提供了语义值,并且无需调整以下内容的显示H1:

   
   testing...
   

使用这个公式,它将始终没有裂缝:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

  

    

      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    
  

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

    

        

            

                BUTTON TEXT
            
        
    

.container {
    height: 180px;
    width:100%;
}

  
I am in Center