Right-align the span and vertically align the header to the left

Seeking guidance on aligning a span to the right of a div, where the span is nested within a button.

Although I have successfully achieved the above, I am encountering difficulties in vertically aligning the header while also keeping it to the left.

.spec-li>li>span {
  padding: 5px 0 0 0;
}

.spec-label {
  display: block;
  float: left;
  width: 50%;
  font-weight: 700;
  font-size: 12px;
}

.spec-value {
  display: block;
  float: right;
  width: 50%;
  text-align: right;
  font-size: 12px;
}

.card-header-spec {
  display: flex;
  justify-content: space-between
}

.card-spec-button-font-size {
  font-size: 30px
}

.spec-card {
  border-width: 0;
  border-top-width: 1px;
  background-color: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<section>
  <div class="accordion" id="accordionWeight">
    <div class="card spec-card">
      <div class="card-header card-header-spec" id="headingOne">
        <h5 class="mb-0">Weight</h5>
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            <span class="card-spec-button-font-size">+</span>
                                        </button>
      </div>

      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionWeight">
        <div class="card-body">
          <ul class="list-unstyled spec-li">
            <li>
              <span class="spec-label">Base Weight</span>
              <span class="spec-value">2351 lbs (1064kg)</span>
            </li>
            <li>
              <span class="spec-label">Useful Load</span>
              <span class="spec-value">1249 lbs (569kg)</span>
            </li>
            <li>
              <span class="spec-label">Cabin payload with 3 hr trip fuel and 45 min reserve</span>
              <span class="spec-value">895 lbs (409 kg)</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

I've included a screenshot showcasing the current layout:https://i.sstatic.net/RJ0HV.png

If anyone can assist with this issue, it would be greatly appreciated.

htmlcssbootstrap-4

Answer №1

To vertically align the h5 in the center, follow these steps.

.card-header-spec {
    display: flex;
    justify-content: space-between;
}

In the code snippet above, you can see that the parent of h5, card-header-spac, uses flex. In Bootstrap-4, you can utilize align-items-center to vertically center the content of a flex element.

    .spec-li>li>span {
      padding: 5px 0 0 0;
    }

    .spec-label {
      display: block;
      float: left;
      width: 50%;
      font-weight: 700;
      font-size: 12px;
    }

    .spec-value {
      display: block;
      float: right;
      width: 50%;
      text-align: right;
      font-size: 12px;
    }

    .card-header-spec {
      display: flex;
      justify-content: space-between
    }

    .card-spec-button-font-size {
      font-size: 30px
    }

    .spec-card {
      border-width: 0;
      border-top-width: 1px;
      background-color: none;
    }

If you wish to apply custom CSS, add align-items: center to the card-header-spec class.

.card-header-spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Answer №2

To vertically align in CSS, include align-items: center within the card-header-spec.

See below for the updated CSS:

.spec-li>li>span {
  padding: 5px 0 0 0;
}

.spec-label {
  display: block;
  float: left;
  width: 50%;
  font-weight: 700;
  font-size: 12px;
}

.spec-value {
  display: block;
  float: right;
  width: 50%;
  text-align: right;
  font-size: 12px;
}

.card-header-spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-spec-button-font-size {
  font-size: 30px
}

.spec-card {
  border-width: 0;
  border-top-width: 1px;
  background-color: none;
}

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

Parent div overflowing due to vertical flex container

In my current project, I am attempting to design a layout with a fixed header and footer along with a dynamic content area that utilizes the remaining vertical space. The content-wrapper contains a lot of data, which may require a scrollbar to navigate. H ...

htmlcssflexbox

Tips for modifying the border of an entire column in react-table

My goal is to adjust the style according to the screenshot below. This is what I expect: However, this is what I currently have: As you can see, the border bottom of the last column is not applied as expected. I have tried using the props provided by r ...

javascriptcssreactjsreact-table

The time discrepancy in Django caused by importing data from MySQL with mismatched timezones

Currently, I am utilizing Django 3 with Bootstrap 4 and MySQL 5.7 on a Laragon server running Windows 10. In my Django settings: TIME_ZONE = 'Europe/Paris' In my MySQL settings: TIME_ZONE = SYSTEM (My system is set to 'Europe/Paris') ...

mysqldjangobootstrap-4timezonedjango-timezone

Two tables arranged in a nested grid layout

Picture a bootstrap grid setup with an 8:4 layout. <div class="container"> <div class="row"> <div class="col-md-8"> </div> <div class="col-md-4"> </div> </div> </div> ...

htmlcssbootstrap-4grid-layout

Lightbox Thumbnail feature in Wordpress theme

Looking for some help with customizing code in my WordPress theme. The current setup includes a thumbnail image with two icons on top - one is a lightbox gallery icon that I want to focus on, and the other is a like button. My goal is to remove the lightb ...

phphtmlcsswordpresslightbox

Resolving Problems with Ion-Split-pane in the Latest Versions of Angular and Ionic

There seems to be a perplexing issue with the ion-split-pane element that I just can't wrap my head around. Once I remove the split-pane element, the router-outlet functions perfectly fine. The navigation is displayed after a successful login. The on ...

cssangulartypescriptionic-frameworkmobile

Choose tag using position in a sequence

I am working on updating the label text "E-mail" to say "User Name" in this HTML markup. The only tool I have access to for this task is jQuery. <div class="foo" style="border:1px solid #444"> <span class="field-with-fancyplaceholde ...

jquerycssjquery-selectors

What is the best way to restrict the border to just one element?

I've configured my navigation bar using a list with li elements. To give it a rounded appearance, I applied a border-radius to the background. Now, I'm looking to remove the border-left specifically from the home element. Below are the code snipp ...

htmlcss

Guidelines for determining a screen's location using Javascript

I have integrated a label onto an image and I am trying to figure out how to determine the exact position of each label on the screen. Is there a way to retrieve the screen coordinates for each label? Below is the code snippet that I have uploaded, perha ...

javascriptcssthree.js

Save a PNG file using the HTML5 Canvas when the Submit button is clicked, with the help of PHP

I am looking for assistance with a signature capture form. I came across a standard template on Github that works perfectly, but I wanted to customize it further. However, my Javascript skills are still in the early stages. The current code allows you to c ...

javascriptphphtmlcanvas

During DragAndDropToObject in Selenium IDE, the initial element in the list is overlooked

I have a webpage that is split into two datagrids. The left datagrid is structured like this: <ul class="left_dg"> <li> <ul></ul> </li> <li> <ul></ul> </li> <li&g ...

jqueryhtmlcssseleniumdrag-and-drop

Avoid losing focus on href="#" (preventing the page from scrolling back up to the top)

Is there a way to prevent an empty href link from causing the page to scroll up when clicked? For example, if I have: <a href="#">Hello world</a> And this "Hello world" link is in the middle of the page. When clicked, the URL would look like ...

javascriptjqueryhtmlcss

Looking for help combining HTML5 Canvas and JavaScript to showcase images. Can anyone lend a hand?

I am currently in the process of developing an Android game using HTML5 and Javascript. I have managed to make some progress, but I have encountered a problem that has left me puzzled. Initially, my JS file and Html file were functioning well together for ...

javascriptandroidhtmlhtml5-canvas

What is the process for inserting HTML content into the body of an iframe?

Is there a way to insert HTML content into the body of an iframe instead of using the src attribute to call a page's URL? I am looking for a code that is compatible with all browsers and works perfectly. ...

javascriptjqueryhtml

Automatically filling in related information in multiple input fields after choosing a value in a specific input field using JavaScript

My horizontal form is dynamically generated using JavaScript, with each input field having a jQuery autocomplete that retrieves data from a database using the $.get method. I'm looking to automatically populate the second input field with the corresp ...

javascriptjqueryhtml

Is there a way to modify the text within a "span" element that directly follows an "i" element using jQuery?

I am attempting to modify the text displayed on a button within a plugin by using jQuery. Here is the outer HTML: <button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour"> <span class="ladda-label"> <i class="ab-hour ...

javascriptjqueryhtmltextnextsibling

What is the best way to position an image in the center for mobile screens?

Struggling to center an image for mobile devices, I have successfully done so for tablets and regular desktop devices. However, I am facing challenges in editing the code to ensure full responsiveness for mobile devices. Additionally, there is excess white ...

htmlcssmobile

Construct a connection between divs

Which element is necessary to generate black lines within the image ? [![enter image description here][1]][1] I have already coded but I'm seeking to produce lines similar to the image (between images). What's the process for achieving this? Kin ...

htmlcssbootstrap-4

Jquery doesn't immediately hide an element after the first click.TabPage.getSelection().extentNode rectangular_HTML

I'm experiencing a peculiar issue with an event listener $(document).on('click', '.suggested-location-item', function(event) { event.preventDefault(); $('#IDsuggestedLocationsList').html(''); $(&apo ...

javascriptjqueryhtml

The clash between Angular's ng-if directive and Bootstrap's popover feature causing unexpected

<div class="form-group" ng-if="firstname"> <label>First Name</label> <input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name"> <a href="" data-toggle="popover" dat ...

htmlangularjstwitter-bootstrap-3popover