垂直对齐图像，文本，css中div内的图像

Question

我定义了一个宽100％，高380像素的Div。在这个Div中，我想在中间和中间显示图像，文本和图像。

我尝试使用此代码 -

<div id="mainContent">
    <div class="wrapper">
        <div class="centered">  

            <img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
            <div  class="text1">
                some random text I want to put in the middle
            </div>
            <img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
        </div>



   </div>
</div>

和相关的CSS是

#mainContent {
 background-color: #10AEEF;
 margin: 0px auto;
 border: 0px solid #000000;
 width:100%;    
 height:380px;
 text-align:center;
}

.wrapper {
 text-align:center;   
 border:0px solid #00FF00;

}

.wrapper:before {
 content:'';
 height:100%;
 display: inline-block;
 vertical-align:middle;
}

.centered {
 display: inline-block;
 vertical-align:middle;
}


.g1 {

 margin: 0px auto;
 border: 0px solid #0000FF;
 float:left;

}

.text1 {

 margin: 0px auto;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 44px;
 color: #FFFFFF;
 border: 0px solid #FF0000;
 width:50%;
 float:left;

}

.g2 {

 margin: 0px auto;
 border: 0px solid #0000FF;
 float:left;

}

我试图避免使用表格来显示它。但是我希望中心的类位于中间和中间，在中间的g1中，text1在中间，g2在中间。

现在所有人都漂浮到左边。但是当我拿出它时，它们是一个在另一个上面而是在中间。我想我错过了一些基本的东西。

Answer 1

如果我正确理解你的问题并且你想让图像和文本都集中在另一个上面那么这就是（我认为）你需要的所有内容：

#mainContent{
background-color:#10AEEF;
height:380px;
text-align:center;
}

请注意，您可以指定border:0px solid #000000;之类的内容。基本上你正在做的是指定什么是默认值，你不需要它们。

修改

这是将所有内容纵向和横向居中所需的代码：

<div id="mainContent">
    <div class="centered">
        <img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
        <div class="text1"><p>Some text here...</p></div>
        <img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
    </div>
</div>

和css

#mainContent{
    background-color: #10AEEF;
    width:100%;
    height:380px;
    text-align:center;
    position:absolute;
}

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

注意：如果您想保留包装器div，请确保将css从.centered更改为.wrapper