我正在开发一个bootstrap项目,我需要一个文本和图像,看起来类似于之前在链接下面提到的问题:
How to vertically align both image and text in a DIV using CSS?
另外,我有一个固定高度为550px的背景横幅。 我试图使用bootstrap创建它,并尝试使用Display:table,display:table-cell,vertical-align:middle;属性,但我似乎没有使用高度:550px在包含文本和图像的两个div上正确。
.overview-banner {
background: url(../img/overview/overview-bg.jpg) no-repeat center center;
background-size: cover;
height: 550px;
.display-table{
display: table;
}
.verticle-center{
display: table-cell;
vertical-align: middle;
}
<section class="overview-banner">
<div class="container-fluid">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="display-table" style="height:550px;">
<div class="verticle-center" style="height:100%">
<h1>The Multi-Faceted Simpuite</h1>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="display-table" style="height:550px;">
<div class="verticle-center" style="height:100%">
<img src="{{ STATIC }}assets/img/overview/overview-banner.png" alt="Multi Faceted Simpuite" class="img-responsive img-center-xs">
</div>
</div>
</div>
</div>
</section>
我希望在编码中不使用高度来获得结果。
另外,我希望它在移动设备中出现时能够快速响应。
请告知是否有任何其他方法可以做响应,并且根据550px的横幅高度居中文本和图像,并且不需要经常提及高度。
答案 0 :(得分:0)
有一个小错误,你错过了第一个CSS声明中的结束}
,这使整个CSS过时了。并且还考虑给出text-align: center
。您并不需要在此处指定height
。你可以这样使用:
.overview-banner {
background: url(../img/overview/overview-bg.jpg) no-repeat center center;
background-size: cover;
}
.display-table{
display: table;
}
.verticle-center{
display: table-cell;
vertical-align: middle;
text-align: center;
}
<section class="overview-banner">
<div class="container-fluid">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="display-table">
<div class="verticle-center">
<h1>The Multi-Faceted Simpuite</h1>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="display-table">
<div class="verticle-center">
<img src="{{ STATIC }}assets/img/overview/overview-banner.png" alt="Multi Faceted Simpuite" class="img-responsive img-center-xs">
</div>
</div>
</div>
</div>
</section>
答案 1 :(得分:0)
您想要支持哪些浏览器?如果它是最新的那些,那么我建议你使用&#34; display:flex&#34 ;; Browser Support
<div class="align">
<div class="align-item">
<img src="http://lorempixel.com/400/200/">
</div>
</div>
<style>
html,body {
width:100%;
height:100%;
}
.align {
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
.align-item {
max-width: 50%;
}
</style>