自举中心垂直对齐两个文本块 [英] Bootstrap center align two blocks of text vertically

问题描述

我正在创建一个需要包含2个部分的小横幅类div。在左边，我有一些h1文本和正确的正常文本。文本部分需要高度相同，文本需要居中垂直。除了垂直居中文本以外，我拥有所有我想要的内容。

代码

  @import url（// maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);#home-wide {height：100％ ;填充：30px; margin-top：50px; display：flex;}。home-wide-part {align-items：stretch;白颜色; text-shadow：2px 2px＃000000; background-color：red} .text-vertical-center {height：auto; margin：auto;}  

 < div class =container > < div class =row> < div id =家庭范围> < div class =col-sm-4 home-wide-part> < h1>了解我们的特别优惠< / h1> < / DIV> < div class =col-sm-8 home-wide-part> < div class =text-vertical-center> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum< / div> < / DIV> < / DIV> < / div>< / div>  

编辑：我刚刚发现我的尝试没有响应，我需要它响应，即在小屏幕上彼此相对。

解决方案

• 将背景颜色移到父
>

• 使两个框内嵌垂直align = middle和float = none
  
  
  
  
  • 您还需要消除两箱
  
  

@import url maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);#home-wide {color：white;背景颜色：红色; text-shadow：2px 2px＃000000;}。home-wide-part {float：none;显示：inline-block; vertical-align：middle;}

< div class = 容器 > < div class =row> < div id =家庭范围> < div class =col-sm-4 home-wide-part> < h1>了解我们的特别优惠< / h1> < / div><！ - 内嵌块之间的空白占用〜4px并且弄乱％宽度...将其删除！ - >< div class =col-sm-8 home-wide-part> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum< / div> < / DIV> < / div>< / div>

I am creating a small "banner" kind of div which needs to contain 2 parts. On the left I have some h1 text and on the right normal text. The text parts need to be the same height and the text needs to be centered vertical. I have everything like I want except the vertical centered text.

Code

@import url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);

#home-wide {
  height: 100%;
  padding: 30px;
  margin-top: 50px;
  display: flex;
}
.home-wide-part {
  align-items: stretch;
  color: white;
  text-shadow: 2px 2px #000000;
  background-color: red
}
.text-vertical-center {
  height: auto;
  margin: auto;
}

<div class="container">
  <div class="row">
    <div id="home-wide">
      <div class="col-sm-4 home-wide-part">
        <h1>FIND OUT ABOUT OUR SPECIAL OFFERS</h1>
      </div>
      <div class="col-sm-8 home-wide-part">
        <div class="text-vertical-center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
      </div>
    </div>
  </div>
</div>

Edit: I just found out my attempt isn't responsive, I need it to be responsive i.e. cols above each other on small screen.

解决方案

The most appropriate solution I could think of is this:

• Move the background color to the parent
• Make the two boxes inline block with vertical align = middle and float = none
  • You also need to eliminate any white space between the two boxes

@import url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);

#home-wide {
  color: white;
  background-color: red;
  text-shadow: 2px 2px #000000;
}
.home-wide-part {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

<div class="container">
  <div class="row">
    <div id="home-wide">
      <div class="col-sm-4 home-wide-part">
        <h1>FIND OUT ABOUT OUR SPECIAL OFFERS</h1>
      </div><!--
        white space between inline block occupies
        ~4px and messes up % widths... remove it!
   --><div class="col-sm-8 home-wide-part">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </div>
    </div>
  </div>
</div>

这篇关于自举中心垂直对齐两个文本块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！