文本的垂直对齐方式 - 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 的垂直居中技巧，但这会阻止文本在较小的视口下移动到图像下方。

这是 class

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

文本的垂直对齐方式 - Bootstrap

Vertical alignment of text - Bootstrap

html

css

vertical-alignment

twitter-bootstrap

twitter-bootstrap-3