需要居中对齐的文本和图像

Question

I am working on a bootstrap project and I need to have a text and image and would look similar to a question previously asked here under the link:

How to vertically align both image and text in a DIV using CSS?

Also, I have a background banner with a fixed height of 550px. I am trying to create this using bootstrap and have also tried using Display: table , display: table-cell, vertical-align: middle; properties but I can' t seem to get right without using putting the height:550px on the both divs containing the text and image.

 .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>

I want to get the result without using height so much in the coding.

Also, I want this to be responsive when it appears in a mobile device.

Please advise if there is any other way to do it bootstrap which can be responsive and has centered text and image as per the banner height of 550px and no need of mentioning the height so often.

Answer 1

There was a small mistake, that you have missed the closing } in the first CSS declaration, which made the whole CSS obsolete. And also consider giving a text-align: center too. You don't exactly need the height to be specified here. You can use this way:

 .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>

Answer 2

What browsers are you trying to support? If its most of the latest ones then I suggest you use "display:flex"; 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>

http://codepen.io/richardhealy/pen/zGwbLz