Question

目标：使用Bootstrap将文本和图像的段落排成一行并进行适当的调整。我很惊讶我发现这很棘手。

我希望段落垂直居中以与图像对齐。到目前为止，如果屏幕太大，文本会比图像高得多。我希望它垂直居中。或者，如果屏幕较小，则图像高于文本。有人可以建议我如何使用Bootstrap实现这一目标吗？当前代码＆amp;小提琴下面。谢谢你的帮助！

这是我的代码：

 <div id='sectionTwo' > 
    <div class="container-fluid">
    <div id='' class="row">
    <br>
    <div class="col-md-6 col-sm-12">
    <br>
    <p class='text-left aboutUsText' id=''>porchetta alcatra corned beef 
    doner turducken burgdoggen venison prosciutto. Ham brisket leberkas pork 
    chop tenderloin hamburger cow turducken fatback prosciutto. Ham hock 
    burgdoggen bresaola prosciutto ground round. Corned beef venison 
    shoulder tri-tip brisket ham hock ribeye flank bresaola spare ribs 
    meatloaf. Corned beef venison shoulder tri-tip brisket ham hock ribeye 
    flank bresaola spare ribs meatloaf.. </p>
    <br>
    <p class='text-left aboutUsText' id=''> porchetta alcatra corned beef 
    doner turducken burgdoggen venison prosciutto. Ham brisket leberkas pork 
    chop tenderloin hamburger cow turducken fatback prosciutto. Ham hock 
    burgdoggen bresaola prosciutto ground round. Corned beef venison 
    shoulder tri-tip brisket ham hock ribeye flank bresaola spare ribs 
    meatloaf.</p>
    <br>
    </div>

    <div id='imageDiv' class="col-md-6 col-sm-12">
    <br>
    <img  class="img-responsive thumbnail" id='aboutUs' 
    src="https://i.imgur.com/dSbnapT.jpg"> 
<br>
        </div>
        </div>
        </div>
        </div>

Answer 1

这样的东西？ codepen

用div包装段落并使用flexbox

.text {
  height: 100%;
  flex-direction: column;
  display: flex;
  justify-content: center;
}

Bootstrap：图像和文本对齐？

1 个答案: