Center the text vertically within the space

I am interested in aligning the text next to an image vertically in the middle for a cleaner appearance. By using the code snippet below, you can see what I mean by clicking to view it in full screen.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


            <section id="" class="ts-block ts-xs-text-center">
                <div class="container">
                    <!--end ts-title-->
                    <div class="row">
                            <div class="col-md-6" data-animate="ts-zoomIn" data-delay="0.1s">
                                <h4>Title</h4>
                                <p align="justify">Lorem Ipsum is simply dummy text of the printing and 
                                typesetting industry. Lorem Ipsum has been the industry's standard dummy
                                text ever since the 1500s, when an unknown printer took a galley of type 
                                and scrambled it to make a type specimen book. It has survived not only five
                                centuries, but also the leap into electronic typesetting, remaining essentially
                                unchanged.
                                </p>
                            </div>
                            <div class="col-md-6 text-center pb-5" data-animate="ts-fadeInUp" data-delay="0.1s">
                                <img src="https://conceptodefinicion.de/wp-content/uploads/2015/08/naturaleza-2-e1439386596208.jpg" class="img-fluid" alt=""/>
                            </div>
                    </div>
                </div>
            </section>

Answer №1

To center the content within a div container, you can make it a flexbox and use the justify-content property. Here's an example:

.row .col-md-6:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<section id="" class="ts-block ts-xs-text-center">
  <div class="container">
    <!--end ts-title-->
    <div class="row">
      <div class="col-md-6" data-animate="ts-zoomIn" data-delay="0.1s">
        <h4>Title</h4>
        <p align="justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
      </div>
      <div class="col-md-6 text-center pb-5" data-animate="ts-fadeInUp" data-delay="0.1s">
        <img src="https://conceptodefinicion.de/wp-content/uploads/2015/08/naturaleza-2-e1439386596208.jpg" class="img-fluid" alt="" />
      </div>
    </div>
  </div>
</section>

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

Tips for preventing multiple counter buttons from conflicting with one another

Currently, I am in the process of creating an online restaurant platform that allows customers to place food orders. To streamline this process, I am developing individual cards for each food item available on the menu. In addition, I am implementing butto ...

trouble displaying Google AdSense ads

I'm having trouble getting the ad to display on my website despite trying many different solutions. Any advice you can offer would be greatly appreciated. Thanks in advance! <!doctype html> <html lang="en"> <head> < ...

Having difficulty accessing the value of a table td element in HTML using a jQuery selector

When creating a table, I utilize ng-repeat to generate table rows. Whenever the dropdown changes, a function is triggered which applies certain conditions. Based on these conditions, an object is added to an array that is bound to a scope variable. Here i ...

Steps for accessing registration form data once the signup button has been clicked

Hello everyone! I have a code that includes login and registration forms as tabs. When we click on either one, it goes to the respective form. Now, I want to make a change by removing the Register tab and adding it as a signup button next to the login butt ...

Guide on showcasing specific columns from a table by utilizing an HTML listbox in conjunction with SQL coding

Hello, I need assistance with a specific task. I am looking to create a table that has two columns: one for the Country and one for the Capital. This table should list every country in the world along with its corresponding capital. Additionally, I would l ...

Designing an advanced remote upload system using jQuery AJAX and PHP

Currently, I am in the process of developing an image hosting script and everything is going smoothly so far. To enable local uploading with drag & drop + AJAX, I have utilized various plugins which are working perfectly. Now, I am moving on to implementin ...

Using jQuery to update a table, however, the browser is failing to automatically refresh the

I have developed a node.js and sockets app to create a Single Page Application (SPA). The user can fill out a form to create a new lobby. Upon submission, a socket event is sent to the server, where the new lobby is added. The server then emits an event to ...

MVC error encountered when attempting to pass the parameter '&' results in failure

Encountered an error in MVC while passing '&' as a parameter, which fails to display the desired outcome. How can I address this issue with the following example? public IActionResult Create(int? idTrabalhador, [FromQuery]string GridState{} ...

What is the best way to directly serve a static html file from a server using React and Express?

I recently downloaded a visually appealing HTML page with links to necessary CSS and JS files from a website builder. My intention is to use this page as the landing page for my React application. However, I'm unsure of the best approach to achieve th ...

Instant reset of jQuery toggle upon completion

Is there a way to automatically hide certain elements (display: none) on small screens and show them (display: block) on larger screens? I have achieved this using bootstrap4 with the following code: <section id="categories"> <p data-toggle=" ...

Determine the elapsed time in seconds between two specified moments

I am trying to implement two input fields in my HTML, one for a starting point and another for an end point. The user will enter two times like this: For example: [8:15] - [14:30] alert("XXXXX seconds") I want to calculate the number of seconds between 8 ...

Allow the words to seamlessly transition back and forth between columns in a continuous cycle

Currently, I am attempting to showcase a large text in a format similar to a book. Each "page" has designated width and height, with content displayed over two columns: left and right. In this layout, page 1 is on the left, page 2 on the right, page 3 on t ...

Transmit the variable to the jQuery modal popup post haste

As a novice in Jquery, I am experimenting with some basic examples to enhance my skills. In one such example, I am attempting to transfer POST variables from a PHP form to a Jquery modal popup that I came across online. Unfortunately, I am encountering an ...

Tips for implementing a sticky sidebar in HTML5 with jQuery

I currently have two files: index.php and aside.php. I've already created the contents of aside.php. Now, I want to make the aside page sticky. To achieve this, I referred to the following link: http://codepen.io/pouretrebelle/pen/yvcBz My struggle ...

Encountering issues with submitting a request when using $.ajax GET function

I'm encountering an issue with the code functionality. The problem arises when a user clicks on the "Email page" link, as it should open in a fancybox with an address input and a submit button. However, upon clicking the submit button, nothing seems t ...

Could columns in flexbox be stretched? It's up for debate

When using the "old" flexbox implementation, I would typically employ -webkit-box-align: start; to prevent side by side columns from being the same length. However, I am struggling to achieve the same result with the new specification. More information ca ...

Is it feasible to incorporate the CSS and Bootstrap (CDNs) specific to an HTML component without affecting the styling of other pages?

One way I am able to recycle the HTML component is using this code: $.get("nav.html", function(data) { $("#fulloptions").replaceWith(data) }) However, there’s a conflict because nav.html uses a different version of Bootstrap than my index file does ...

Expanding the width of the textfield is not possible in CSS styling

My current search bar design features an input area that does not match my expectations. The input length is restricted and starts from the center rather than the black border I had envisioned. If you'd like to see the code and design in action, chec ...

Utilizing BootStrap 4 to ensure uniform image sizes within a row of columns

I'm facing a challenge in creating a row of 4 images that are responsive and uniform in size, despite being different dimensions (640x799, 640x479, ...). I've attempted to use columns and img-fluid to achieve this, but the shorter images do not f ...

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

While trying to reduce the left padding of the v-select menu checkbox using the F12 debugger, I encountered an issue where the menu suddenly disappears when clicked. This makes it difficult to see the active menu. Attached is a screenshot of the select me ...