[英]Need centered aligned text & image
我正在做一个引导项目,我需要一个文本和图像,看起来类似于之前在链接下提出的问题:
另外,我有一个固定高度为 550px 的背景横幅。 我正在尝试使用引导程序创建它,并且还尝试使用 Display: table 、 display: table-cell、vertical-align: middle; 属性,但如果不将 height: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 居中的文本和图像,并且无需经常提及高度。
有一个小错误,你错过了第一个 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>
您尝试支持哪些浏览器? 如果它是最新的,那么我建议你使用“display:flex”; 浏览器支持
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.