代码之家 › 专栏 › 技术社区 › just curious

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

vertical-alignment css

just curious · 技术社区 · 11 年前

我已经定义了一个Div,其宽度为100%,高度为380像素。在这个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中。

现在所有的都向左浮动。但当我把它拿出来时,它们一个在另一个上面,但在在中间对齐。我想我缺少了一些基本的东西。

1 回复 | 直到 11 年前

user2933885 user2933885 11 年前

如果我正确理解了您的问题,并且您希望图像和文本一个在另一个之上居中,那么这就是(我认为)您所需要的:

#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

推荐文章

William Entriken · 排列不同尺寸的徽章

8 年前

user438461 · 在我的WPF选项卡项中设置VerticalContentAlignment会更改选项卡中的文本和选项卡中包含的控件

8 年前

SmallSani · 当更改内容时,如何在页面上垂直居中放置div?

8 年前

Benji · -webkit背景剪辑:文本和垂直居中文本

8 年前

Travis Martin · flexbox布局中的垂直文本

8 年前

Mike Waldrup · 弹性物品被撞倒,正好是前一件物品的一半高度

8 年前

karlo1zg · 垂直对齐输入元素中间的浮动标签

8 年前

Ahmed Elashker · Xamarin在平台垂直选项上形成XAML

9 年前

coreysimons · 动态布局中的图像对齐

9 年前

Théo Clayette · 设置垂直Android工具栏

9 年前