Align a span vertically within a div

I need help aligning the content "ABC Company" vertically within a div using Bootstrap 4's alignment helper classes. Despite my efforts, I have not been successful. Here is the code I am using:

<div class="container" style="width: 740px;">
<div class="row">
  <div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
      Your Account
  </div>
</div>
<div class="row">
  <div class="col-sm text-center" style="background-color:#0471AF; height:100px;">
    <span class="align-middle">ABC Company</span>
  </div>
</div>

I would appreciate any guidance on what I might be missing!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve center alignment, you can apply the CSS properties 

display: flex; justify-content: center; align-items: center;
to the class col-sm text-center. Alternatively, you could use 
display: flex; justify-content: center;
for col-sm text-center and include align-self: center; for the <span> element.

.col-sm.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<style>

</style>
<div class="row">
  <div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
      Your Account
  </div>
</div>
<div class="row">
  <div class="col-sm text-center" style="background-color:#0471AF; height:100px;">
    <span class="align-middle">ABC Company</span>
  </div>
</div>

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

Utilize the input field value in an HTML dialog box to assign it to a variable in the code.gs file with the help

I'm trying to create a dialog box where the user can select a year, and then have the server process the selected value using the function doSomethingWithCompetitionYear(theYear). I've researched several discussions, but I'm having trouble ...

javascripthtmlgoogle-apps-scriptdialog

Rearrange the sequence of specific child elements within the Div

Is there a way to reverse the order of specific div's children elements using just CSS? For instance: I need <div id="parent"> <a>A</a> <a>B</a> <a>C</a> <a>D</a> &l ...

htmljquerycsstwitter-bootstrapbootstrap-4

The height of Bootstrap 4 row does not adapt to the height of the Slick.js slides

I am attempting to create a Slick.js slider with a parent and thumb navigator. In the demo on this codepen, each slide has a different height based on the content within the container. I expect the row with a bg-dark background to adjust its height as Sl ...

bootstrap-4slick.js

The JS content failed to load into the HTML page

I need help creating a workout tracker using two JS files. The main.js file is responsible for loading content from the second file (workoutTracker.js) into the index.html. However, I'm facing an issue where the content is not being displayed on the p ...

javascripthtmlcssperformancetracker

Steps to Activate a Hyperlink for Opening a Modal Dialogue Box and Allowing it to Open in a New Tab Simultaneously

I am currently working on a website project. Within the website, there is a hyperlink labeled "View Page". The intention is for this link to open the linked page in a modal dialog upon being clicked. Below is the code snippet that I have used to achieve t ...

javascriptjqueryhtmlweb-applications

Prevent event propagation when a CSS pseudo-element is active

In my project, there are two elements: .parentElement and .childElement. Both have the :active implemented to appear darker when pressed. The .childElement is nested inside the .parentElement. I am looking for a way to prevent the .parentElement:active fr ...

htmlcsspseudo-class

Ensuring all Bootstrap columns have equal height to match the tallest one

I have several .col-md-2 elements on my Bootstrap website, each containing an image of varying height. I am looking to ensure that all the columns have the same height so that I can align the images horizontally. Below is the HTML code: <div class="r ...

htmlcsstwitter-bootstrap

Putting the second line of a list in a paragraph element with indentation (excluding UL or OL)

I am working with a table that has the following structure: html { width: 400px; } <table> <tr> <td>Description:</td> <td style="white-space: pre-wrap;"> Some text which could be quite long with some &apos ...

htmlcss

Troubleshooting Angular MIME problems with Microsoft Edge

I'm encountering a problem with Angular where after running ng serve and deploying on localhost, the page loads without any issues. However, when I use ng build and deploy remotely, I encounter a MIME error. Failed to load module script: Expected a ...

javascripthtmlangulartypescriptwebstorm

How can I alter the display of table rows and columns using responsive design techniques?

Currently utilizing bootstrap, I have a drinks menu displayed in the following layout when viewed in Firefox. The mobile view of this menu is functioning properly. However, I am encountering issues with the desktop view as the columns are not aligning cor ...

htmlcssbootstrap-5

Submitting a form using jquery in HTML

Below is the code I have created. It consists of a text-input field and a 'Search' button within a form. Upon clicking the search button (submitting the form), it should trigger the .submit function to carry out the necessary processing. HTML CO ...

jqueryhtmlajaxformssubmit

Inquire regarding the header image. Can you confirm if the current HTML and CSS for this is the most efficient approach?

This is a preview of my website in progress (Disclaimer: I'm currently learning HTML to build this site, design comes next. I know it's not the conventional way to design a site, but oh well) Check out the site here Is the HTML code for the hea ...

htmlcssheader

Can I specify which modal or component will appear when I click on a component?

Working on a small Angular 5 project, I have a simple component that represents a food product shown below: [![enter image description here][1]][1] This component is nested within my main component. When this component is clicked, a quantity component/m ...

javascripthtmlangularangular-components

tips for expanding the size of your images

Hey there, I'm looking for some help with the code below. I need to increase the width of the images and remove the border of the slider div which is currently showing a white border that I want to get rid of. I am using JavaScript to display the imag ...

jqueryhtmlcss

What is the best way to deactivate certain JavaScript functions on my webpage when accessed through a mobile device?

Is there a way to disable specific JavaScript functions when accessing my website from a mobile device? While I can achieve this using CSS only, certain buttons require JavaScript functionality. Below is the internal JavaScript code: var menuBtn = docume ...

javascripthtmlresponsive

Displaying a dynamic menu using Angular's ngFor loop

I am attempting to create a menu with sub-menus. The desired structure for my menu is outlined below. However, the demo I'm testing is not producing the correct structure. Check out the demo here. "Sub Test": { // Main menu "Example1":"hai",//sub ...

javascripthtmlangulartypescript

Activating a certain class to prompt a drop-down action

My PHP code is displaying data from my database, but there's a bug where both dropdown menus appear when I click the gear icon. I want only one dropdown to appear when clicking the gear of a specific project. Can you help me fix this issue? It's ...

javascriptphpjqueryhtmlcss

The Angular factory function was unable to be initialized

I recently started learning how to integrate Angularjs with ROR using this helpful tutorial While working on adding a new function to retrieve all posts from the database, I encountered a problem. The page no longer loads when I run the code and the HTML ...

htmlruby-on-railsangularjs

Ways to create spacing between vertically stacked columns in Bootstrap

I have created a website using Bootstrap and PHP to display data from 18 categories in columns. The code for listing the categories in a single row is shown below: <div class="row"> <?php foreach($categories as $val){?> <div class="col ...

htmlcssbootstrap-4rowspacing

The password does not conform to the pattern specified in Angular CLI

I am encountering an issue with password validation. I have implemented a regex pattern like this: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])' and configured my ng-form field as follows: password: ['', [Validators.pattern('(?=.*[a-z])(? ...

htmlregexangularpasswords