How to center align text in the media-body using Bootstrap 4 Beta

Struggling to vertically align the text in media-body to the middle when using the new Bootstrap 4 beta version.

Tried an approach mentioned in this solution, but it didn't work with the latest version of Bootstrap.

Attempted using text-center and align-middle, however, they were ineffective.

In v3.3.7, there was a class called media-middle that worked, but it seems to have been removed in v4 beta.

Here's the link to the Jsfiddle. Any assistance would be greatly appreciated.

Below is the code for the media list.

<div class="container">
  <div class="row mt-3">
    <div class="col-lg-6 col-md-12 col-sm-12 col-6">
      <ul class="list-group">
        <li class="media mb-2">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body pagination-centered">
            <h6>No commission on refunds or event cancellation</h6>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Your help is highly valued. Thank you.

htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

The style called media-middle has been changed to align-middle in version 4, and it applies the property vertical-align: middle. However, this does not work on flex items.

To center flex row items, you can use align-self-center on the media-body element. This achieves a similar result as align-middle would for an inline block element.

The reason behind this is that the parent of the media-body, the media element, has align-items: flex-start set (to align flex row items at the top). As a result, setting align-self: center on the text will vertically center it.

Keep in mind that the h6 element has a default margin that shifts it slightly vertically. To correct this, you can either utilize the built-in m-0 class, or create your own rule like .media-body h6 { margin: 0; }

Check out the updated fiddle here

Stack snippet

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row mt-3">
    <div class="col-lg-6 col-md-12 col-sm-12 col-6">
      <ul class="list-group">
        <li class="media mb-2">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body pagination-centered align-self-center">
            <h6>No commission on refunds or event cancellation</h6>
          </div>
        </li>
        <li class="media mb-2">
          <img class="mr-3  rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body align-self-center">
            <h6>Sell tickets</h6>
          </div>
        </li>
        <li class="media mb-2 ">
          <img class="mr-3  rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body align-self-center">
            <h6>Book camping/Stables</h6>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Alternatively, you could also apply the flex container class align-items-center on the media element, see the updated fiddle here; the choice between the two depends on the desired behavior of other flex items.

Answer №2

To improve your layout, consider adding the classes d-flex and align-items-center to both your li elements and the <div class="media-body"> elements.

In terms of flexbox, you can utilize display: flex and align-items: center on both li and li > div. Check out the demonstration below and view the updated fiddle here:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<div class="container">
  <div class="row mt-3">
    <div class="col-lg-6 col-md-12 col-sm-12 col-6">
      <ul class="list-group">
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body pagination-centered d-flex align-items-center">
            <h6>No commission on refunds or event cancellation</h6>
          </div>
        </li>
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body d-flex align-items-center" style="height:64px;">
            <h6>Sell tickets</h6>
          </div>
        </li>
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body d-flex align-items-center">
            <h6>Book camping/Stables</h6>
          </div>
        </li>
      </ul>
    </div>
    <div class="col-lg-6 col-md-12 col-sm-12 col-6">
      <ul class="list-group ">
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body d-flex align-items-center">
            <h6>Discounted prices for club members</h6>
          </div>
        </li>
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body d-flex align-items-center">
            <h6>Live scoring with JJD and Jumpscore</h6>
          </div>
        </li>
        <li class="media mb-2 d-flex align-items-center">
          <img class="mr-3 rounded-circle" width="64" height="64" src="http://lorempixel.com/64/64/">
          <div class="media-body d-flex align-items-center">
            <h6>Live editing during the show</h6>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer №3

It is important to start by incorporating the CSS property display:inline-block for the <li> element, along with utilizing class="text-center" to centrally align images within the layout. Additionally, consider applying class="text-center" to the media-body section for consistent alignment.

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

What is the best way to use createElement in JavaScript to insert <p> and <span> elements within a <div>?

I am currently experimenting with generating sentences accompanied by draggable text boxes. To achieve this, I intend to construct the following HTML structure using JavaScript exclusively: <div> <p>Data1<span class = "smallBox droppabl ...

javascriptjqueryhtmlcss

Deleting the clone <div> while ensuring the main <div> is kept clear of any remaining data

Initially: https://i.sstatic.net/SLG7O.png After adding a new row and then removing it. https://i.sstatic.net/FegjK.png Why is this happening? When I set val(""), the textbox should have no value. What mistake did I make in my code? Please assist. Her ...

javascriptjqueryhtmlasp.netclone

Issue with vertical navigation bar

Currently working on creating a vertical navigation bar without any styling. It's challenging to figure out how to align the items properly side by side. You can check out the basic functionality at . When clicking on 'Android', I want the g ...

htmlcss

what is the process for customizing the default font in tailwindcss?

I recently started a new project using React, and I have integrated a custom font in my index.css file. I have also included the necessary font files. @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; @import url(assets/font/ir ...

htmlcssreactjsfontstailwind-css

How can a loading bar be shown while a PHP page is loading?

I currently have an HTML form that directs to a PHP file upon submission. The PHP file takes some time to load due to background processes running, so I am interested in implementing a progress bar or alert to indicate when the file is fully loaded. Does ...

phpjavascripthtml

I have successfully added an image to my CSS file, and it is appearing in Chrome's inspect feature. However, the image is not visible on the actual website

Here is the code snippet: .nav-link-apple { width: 1.6rem; background: 4.4rem; background: url(./Logo.jpg) center no-repeat; } Although the image I added can be seen in inspect on Chrome, it is not visible on the actual webpage. I have tried s ...

htmlcss

What is the best way to format a time in a 12-hour clock using JavaScript?

Is it possible to create a timer that performs an action after 12 hours? I want the timer to start at 6am and end at 6pm, lasting for exactly 12 hours. Additionally, I'm interested in converting my current 12-hour clock into a 24-hour format. I am se ...

javascripthtmlcss

Implementing CSS loading in Vue 3's shadow DOM for nested components

I'm currently working on building an embeddable widget using a custom element with Vue. In order to achieve this, I've created a file called Widget.ce.vue and enabled style loading in the component's shadow root. However, I've run into ...

cssvue.jsvuejs3custom-elementvue3-sfc-loader

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...

phpcsswordpresspagespeedvisual-composer

Leveraging jQuery to automatically fill in a time field while excluding other buttons

I've been working on using jQuery to automatically fill in a time input field. The functionality is working properly, but the time is also being applied to my other button. How can I make sure it only gets assigned to the time input field? I would re ...

javascriptjqueryhtmldomjquery-plugins

Combining input groups (including addons) with helpful text in Bootstrap 4

I'm having trouble getting Help-texts to appear properly (specifically at the bottom of the field) when using Bootstrap 4's input-groups with add-ons. This is the code I have so far: <div class="input-group mb-3"> <div class="input- ...

twitter-bootstrapbootstrap-4

Concealing the path of a file input in CSS

Similar Question: How to Conceal Input File Path in HTML File Upload Hello there! I was wondering if it's feasible to conceal the input file path and only display the browse button? Thanks a lot! Lucas ...

cssinput-type-file

Automatically activate the next tab in Bootstrap

I have a modal that performs a count. Once the count is completed, the modal closes. My goal is to automatically switch to the next tab in Bootstrap when the modal closes. Here is the HTML: <ul class="nav nav-tabs namelocationtable"> <div clas ...

javascriptjqueryhtmltabsbootstrap-modal

Achieving right to left direction in react-bootstrap: Tips and Tricks

Seeking to create a react UI with a right-to-left (RTL) direction has proven challenging. Attempting to achieve this using bootstrap className="pull-right" or manually adjusting CSS properties like *{direction:rtl;} and .float-right:{float:right;} on react ...

twitter-bootstrapreactjsright-to-leftreact-bootstrapsemantic-ui-react

Converting the length attribute of a table to a string does not yield any

After grappling with this bug for some time now, I've come up empty-handed in my search for a solution online. Expected Outcome: Upon pressing the create row button, I anticipate a new row being added at the bottom of the table. This row should cons ...

javascripthtmlhtml-table

Is it possible to modify the flex direction in Bootstrap based on specific breakpoints?

I am currently utilizing Bootstrap 4 for my project. I have a div that is styled with "d-flex" and it is meant to display as a row at the "lg" breakpoint (screens 1200px and above). However, on smaller devices such as mobile phones at the "sm" or "xs" brea ...

cssbootstrap-4flexbox

Troubleshooting Ajax contact form's failure to refresh (PHP and Bootstrap 4)

I have successfully implemented this code on one website, but it is not working as expected on another website. It sends the email but refreshes the page and redirects to a contact.php page with a message. Despite double-checking everything, including cha ...

javascriptphpajaxbootstrap-4contact-form

Converting MS Access databases

My latest project involves the conversion of an existing MS Access 2007 application into a web-based application. Currently, all data is stored in a SQL Server 2005 database. Given my limited web development experience, I am approaching this task with caut ...

jqueryhtmlweb-servicesms-accessreporting-services

What are the security risks of evaluating user-supplied strings in web browser storage?

I'm in the final stages of developing a script that creates an API for performing storage operations across various web browser storage technologies. Currently, I am focusing on adding conditional retrieval and removal functionalities. These features ...

javascripthtmlsecurityweb-sqlindexeddb

MS Edge modifies the attribute's empty value to 1

I have written a JavaScript code to extract values from a list, but in the Windows Edge browser, it returns a value of 1 even when the actual value of the <li> tag is blank. For example: HTML Code <ul> <li value="">Test 1</li&g ...

javascriptjqueryhtmlmicrosoft-edge