文本的垂直对齐 - Bootstrap

Question

我的情况是文本需要位于图像旁边的div中间。

<div class="row">

            <div class="col-xs-10 col-xs-offset-1 col-md-3 col-md-offset-1">

                <img class="img-responsive" src="../../assets/img/partner-logos/start-up-loans-logo.png" width="270" height="270" alt=""/> 

            </div>

            <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">

                <p>The Start Up Loans Company are a subsidiary of the British Business Bank and deliver the Government’s Start Up Loans programme providing finance and support for businesses who struggle to access other forms of finance.</p>

                <p>For more information about the Start Up Loans Company, click here.</p>

            </div>

            <div class="clearfix"></div>

            <div class="col-xs-10 col-xs-offset-1 col-md-3 col-md-offset-1">

                <img class="img-responsive" src="../../assets/img/partner-logos/business-finance-solutions-logo.png" width="270" height="270" alt=""/> 

            </div>

            <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">

                <p>The Enterprise Loan Fund Ltd (trading as Business Finance Solutions) are an official Finance Partners who are responsible for administering the loan agreements and funds to successful applicants. They are the key point of contact for any matters relating to loan administration and repayments.</p>

                <p>For more information about Business Finance Solutions, click here</p> 



            </div>


        </div>

如您所见，我使用Bootstrap网格布局将图像和文本放在一起。

我最初尝试在行本身上使用flexbox的垂直居中技巧，但这会阻止文本在较小视口处的图像下移动。

这是班级

.vertical-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

所以我有：<div class="row vertical-center"></div>

哪个产生了：

正如您所看到的，这产生了所需的间距，但却消除了元素的自然流动。

我知道我可以使用保证金，但有没有办法计算这个，所以我不必根据图像的大小手动设置保证金？

Answer 1

请尝试下面的代码，如果有效，请告诉我。

display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;

*刚刚添加了flex-wrap：wrap;