html – 垂直和水平将div放在另一个内部

发布时间：2020-12-14 19:36:01 所属栏目：资源来源：网络整理

导读：我试图将div放在另一个div中. 我尝试了以下 HTML和CSS HTML div class="header" div class="homeImageText" h1Document Preparation Like Never Before/h1 /div!--homeImagetext end--/div CSS .homeImageText {left:0; right:0;top:0; bottom:0;margin:auto

我试图将div放在另一个div中.
我尝试了以下 HTML和CSS

HTML

<div class="header">
 <div class="homeImageText">
    <h1>Document Preparation Like Never Before</h1>
    </div><!--homeImagetext end-->
</div>

CSS

.homeImageText {
left:0; right:0;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
}

header{
background: url(../images/header1.png) center center no-repeat; ;
height: 600px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Live
jsfiddle

解决方法

Demo Fiddle

对于垂直居中,将包装div设置为display-table,子设置为：table-cell with vertical-align：middle.然后可以使用text-align：center完成水平居中;

试试CSS：

.header {
    height: 600px;
    display:table;
    width:100%;
}
.homeImageText {
    height:100%;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!