CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3vertical-alignment
Jesse Luke Orange
Jesse Luke Orange

Reputation: 1999

Vertical alignment of text - Bootstrap

I have a situation in which text needs to sit in the middle of a div next to an image.

enter image description here

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

As you can see I have used the Bootstrap grid layout to position the image and text next to each other.

I initially tried to use a vertical centring trick with flexbox on the row itself but this preventing the text from moving under the image at smaller viewports.

This was the class

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

So I had: <div class="row vertical-center"></div>

Which produced:

enter image description here

As you can see this produced the desired spacing but knocked out the natural flow of the elements.

I know I could just use margin but is there a way to calculate this so that I didn't have to manually set the margin depending on the size of the image?

Upvotes: 1

Views: 1127

Answers (1)

Awsme Sandy
Awsme Sandy

Reputation: 1408

Please try the below code and let me know if it works.

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

*Just added flex-wrap: wrap;

Upvotes: 1

Related Questions