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

【问题标题】：Need centered aligned text & image需要居中对齐的文本和图像
【发布时间】：2015-06-09 20:30:04
【问题描述】：

我正在做一个引导项目，我需要一个文本和图像，看起来类似于之前在链接下提出的问题：

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

另外，我有一个固定高度为 550 像素的背景横幅。我正在尝试使用引导程序创建它，并且还尝试使用 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>

我想在编码中不使用太多高度的情况下得到结果。

另外，我希望它出现在移动设备中时能够响应。

请告知是否有任何其他方式可以进行引导，它可以响应并根据横幅高度 550 像素居中文本和图像，并且不需要经常提及高度。

【问题讨论】：

图片在哪里发布并附上实际图片的链接。

标签： html css twitter-bootstrap

【解决方案1】：

有一个小错误，您错过了第一个 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>

【讨论】：

谢谢普拉文！在这里粘贴我的 CSS 代码时，我一定错过了右大括号，但我的 CSS 上有它。我尝试对代码进行修改，但它不起作用，因为文本和图像都显示在顶部，我希望它们在中间。
你试过line-height吗？
.verticle-centers.

【解决方案2】：

您要支持哪些浏览器？如果它是最新的，那么我建议你使用“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

【讨论】：