What is the best way to center an image and text vertically using bootstrap?

I'm currently working on a Bootstrap website and have reached a section where I want to display text on the left and an image on the right. While I've managed to achieve this layout, I'm struggling with vertically centering the image. Despite adjusting the paddings and margins, the alignment still seems off.

Attached is a visual representation of what I have so far:

https://i.stack.imgur.com/dlkRB.png

Below is the code snippet for this particular section:

HTML

    <!-- Section 1 -->
<div class="cssSection cssCenter">
    <div class="container">
        
        <div class="row">
            <div class="col-sm-7">
                <p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p>
            </div>
            
            <div class="col-sm-5">
                    <img class="img-center img-responsive" src="http://placehold.it/300x300">
            </div>
        </div>

    </div>
</div>

CSS

.cssCenter {
    text-align: center;
}

.cssSection {
    padding: 120px 0 70px;
}

.cssInformation {
    font-size: 18px;
}

.img-center {
    margin: auto;
}

I would greatly appreciate any guidance on correctly aligning the image vertically with the text on the left. Thank you in advance for your help!

htmltwitter-bootstrapcssflexbox

Answer №1

Give this a try and share your thoughts!

I've implemented a flexbox like the following:

.cssSection .row {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
}

For responsiveness, I have added the following media query:

@media only screen and (max-width: 650px) {

   .cssSection .row {
      flex-direction: column;
    }
}


.cssCenter {
    text-align: center;
}

.cssSection {
    padding: 120px 0 70px;
}

.cssSection .row {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
}

.cssInformation {
    font-size: 18px;
}

.img-center {
    margin: auto;
}

@media only screen and (max-width: 650px) {

   .cssSection .row {
      flex-direction: column;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<!-- Section 1 -->
<div class="cssSection cssCenter">
    <div class="container">

        <div class="row">
            <div class="col-sm-7">
                <p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p>
            </div>

            <div class="col-sm-5">
                    <img class="img-center img-responsive" src="http://placehold.it/300x300">
            </div>
        </div>

    </div>
</div>
  </body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Vue.js to incorporate the isActive property to the class name within a v-for loop, along with implementing dynamic class names

I am currently using a loop to iterate through some data in my store.js file, and everything is functioning as expected. However, I would like to add a condition to check if the Vue instance is active before applying a specific class to the polygon element ...

javascriptcssvue.js

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

javascripthtmlcssmaterial-ui

"Capturing the essence of your online presence: The

I recently completed a website for my Students Organization, which includes a special page dedicated to recognizing the individuals who helped organize our activities. Each member is represented with a photo on this page, sourced from their Facebook profil ...

javascripthtmlcssfacebookfacebook-graph-api

Incorporating server-side rendered components into a Vue.js parent component

I have a server-side rendered page that includes information about "orders" and a root Vue object initialized as the "parent object." Is it feasible to assign the rendered HTML orders as children of that parent Vue object? Vue.js is known for its dynamic ...

javascripthtmlvue.jsserver-side-rendering

A combination table featuring both fixed and scrolling columns

I'm struggling with a table design where I want part of it to be fixed and the rest to be scrollable. My goal is to achieve something similar to this example, but within a single table structure. If interested, you can view an example here. I found ...

htmlcsscss-tables

Fully compatible with Internet Explorer 6, with a height of

Is there a way to create a div that is always 100% the height of the browser, even if it's empty, and works in IE6? Any suggestions or hacks using CSS? ...

cssinternet-explorer-6

Using JavaScript and Tampermonkey to convert strings from an HTML element into an array

I am trying to change the names of months into numbers and place them in a table cell on a website. I thought using an array would make it easier to reference the month names by their corresponding array numbers, allowing me to add table tags before and af ...

javascripthtmlarraysgoogle-chrome

Move the accordion slider to the top of the browser

I'm working with an accordion menu that has some long content. To make it more user-friendly, I want to add a slide effect when the accordion items are opened. Right now, if you open the first two menu items, the last item's content is cut off a ...

javascriptjquerycssscrollaccordion

The ng-model remains unchanged when the <select> element is modified using JavaScript

I am currently working on creating a customized dropdown box with the help of JavaScript and anglersJS to connect the data with the select element. The user interaction involves clicking on a div element that is styled to act as the dropdown option. This d ...

javascripthtmlangularjs

The sidebar made an unexpected leap from one side to the other, with no memory of ever tampering

I'm feeling a bit overwhelmed because I can't seem to figure this out. My goal is to create a basic page layout with a header, subheader, sidebar, content pane, and footer. Everything was going smoothly until I started writing a function in my J ...

htmlcss

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

javascripthtmlnode.jstypescriptvue.js

Move the button above a hyperlink in a Bootstrap carousel

Is there a way to add a top-right button on each slide that will be positioned over the carousel-control link? How can I achieve this design? Currently, the buttons appear under the carousel-control as shown below: .myButton { position: absolute; ...

csshtmltwitter-bootstrap

When using CSS @media print with inches, different dimensions are displayed post-printing

I'm currently working on a project that involves printing a single div from my webpage. However, I've encountered some issues with the @page tag not affecting the print output as expected. I attempted to manually set the dimensions of the element ...

htmlcssreactjsprintingmedia-queries

Post request failed as it was made from a site other than the main page

Having some trouble with the POST functionality in Node since I am new to it. I have a basic website set up, with the following code: app.get('/sign',(req,res)=>{ res.sendFile(path.join(__dirname, 'static', 'index.html' ...

htmlnode.jshttpwebpost

Access the document on the desktop and open it in a new popup window

As a novice in html coding, I'm wondering if it's possible to write window size and other properties directly into the page. Let me explain. I'm currently working on a calculator and I want to run the HTML file on my desktop. Everything wor ...

javascripthtmlpopupwindow

When I access the website through the LinkedIn app, my CSS styles are getting jumbled up

Is there a way to resolve the problem I'm facing with CSS when accessing the site through the LinkedIn app on iPhone? The issues don't occur on Android. If anyone has a solution, please share. Thank you :) Click Here ...

htmlcssreactjsnext.js

Error when the class is not found + Application

I am attempting to create my debut Applet named MemoSaver2.java In addition, I have crafted the following html: <html> <object classid="java:MemoSaver2.class" type="application/x-java-applet" archive="MemoSaver2.jar" he ...

javahtmlappletnoclassdeffounderror

The background image is not appearing on the div as expected

I've been attempting to create a div and set a background image for it using jQuery, but I seem to be facing issues. When I try setting the background color to white, it works fine. Here's the code snippet: function appendToDom(poster) { ...

javascriptjqueryhtmlcssnode.js

Can a variable containing HTML code be iterated through with a loop?

I am currently working on setting up a select button that will receive options from an ajax call. The ajax call is functioning properly. However, I am facing a challenge when trying to create a variable containing the HTML. I am unsure of how to iterate a ...

javascripthtmlajax

Database storing incorrect date values

After successfully displaying the current year and month in a textbox, an issue arises when submitting the data to the database. Instead of the expected value from the textbox, it defaults to 2014. What could be causing this discrepancy? function YearM ...

javascriptphpjqueryhtmlmysql