How to vertically center text in a DIV using Express JS, Pug template, and Bootstrap

I am currently building a web application using Express JS with Bootstrap 4 styling for the front-end.

There are no custom stylesheets used in this project.

Here is my HTML code featuring Bootstrap 4 styling:

<div class="container">
    <div class="row text-center">
        <div class="col-sm-6">
            <div class="grid-container">
                <div><a class="btn btn-primary btn-lg btn-block" href="items/addItem">Add a New Item</a></div>
            </div>
        </div>
      ... // Additional code continues here
    </div>
</div>

The issue I am facing is that I need to center the text within each DIV element in the grid-container, but they are all currently aligned at the top as shown in the screenshot below.

https://i.sstatic.net/NeJgU.png

Answer №1

If you're seeking a way to vertically align content, there are various methods you can use.

Here is an example:

div.center.middle {
  background: blue;
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
  width: 150px;
  height: 85px;
  display: table-cell;
}
<div class="center middle">
  Test text
</div>

It's important to note that for the vertical-align: center property to function correctly, the display: table-cell; setting must be defined.

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

Displaying a profile hover card allows users to easily discover and choose whether to follow or explore

I created a profile hover card on my website with a follow/unfollow button. However, I encountered an issue - the hover card disappears when I move away from my profile thumbnail. How can I fix this so that the hover card stays visible on mouseover and dis ...

Positioning the filters in jQuery Datatables

I'm currently working with jQuery datatables and I'm attempting to align the filter/search box on the same row as the header of the container holding the datatable. Attached is a screenshot for reference: https://i.stack.imgur.com/nzbIl.png He ...

Can I group data by "Month" in Tabulator JS while still retaining the full date information?

I am currently utilizing the Tabulator JavaScript library. I am aware that there is a group option available where I can group data based on certain fields in my dataset. One of the fields I have is a date field in the format MM/DD/YYYY. My objective is ...

How to align horizontal UL navigation utilizing CSS sprite background

After numerous attempts, I am struggling to center a 4 element horizontal list using a sprite image as the li background within the footer div. My CSS and HTML code is as follows: #footer-share-links { width:400px; text-align:center; margin:10 ...

Sub-menu disappears upon resizing the screen

Currently, I am working on creating a unique responsive navigation system that transforms into a 100% width pulldown menu for mobile devices. To achieve this functionality, I have implemented some JavaScript code that hides any open sub-menu items when the ...

Creating a Full-Width Search Input in Bootstrap 4 Navbar

Is there a way to extend the search input width to 100% in the navbar? https://i.sstatic.net/R1Nyi.png The search input field currently has a limited width: <nav class="navbar navbar-light navbar-dark bg-inverse"> <a class="navbar-brand" href ...

Using Jinja2/Python, is it possible to alter the parent's style depending on the child's value?

Initially, I found that the :has() combinator accomplishes my desired outcome. In my HTML, I have a table structured like this: <table class="table"> {% for dict_item in data | sort(attribute='name') %} <tr class=" ...

Leveraging variables retrieved from an asynchronous operation within an Angular template

After logging in, I am trying to retrieve user details but facing delays in getting the data. This issue seems to be caused by an undefined variable at the moment the template loads. How can I prevent this from happening? onLogin() { if (this.loginPass ...

Toggling the switch leads to a BadRequestKeyError: 400 Bad Request

I am working on a project with Python and Flask to create an index.html that displays a list. My goal is to implement a filter for this list using a Bootstrap switch. Currently, my code successfully displays the index.html list via a GET request. The switc ...

Tips on preventing a header and body text from wrapping around a floated image positioned in the upper left corner

If we consider the layout order like this: H3 <LEFT-FLOATED IMG> <text> <H3> <LEFT-FLOATED IMG> <text> For smaller screen sizes, everything looks fine: https://i.sstatic.net/Dz0BB.png But when the screen gets bigger, a prob ...

What is the best way to populate this dynamic form with data retrieved from the server?

I found a helpful Bootsnipp that utilizes BootStrap.JS to generate dynamic fields and collect data from forms. If, after saving the form, I receive JSON data from the server in key-value pairs, how can I build this dynamic form so that users can easily up ...

Troubleshooting ASP.NET MVC Button Click Issue: Modal Always Retrieves First Row in Table

I've been struggling to find a solution for my issue... :( I would really appreciate it if someone with experience could take a look at it. My current situation: I have a table with multiple rows, including one row with button(s). One of these butto ...

Synchronized Height Bootstrap Cards Inside Slick Carousel

I am encountering difficulties achieving equal height bootstrap cards with varying length body content when using a slick carousel. Despite searching for solutions on similar issues, none of them seem to work in my specific situation. While I have success ...

Add a border around the div that runs into the header

I am looking to create a border and header similar to this example: [![][1]][1] Is there a CSS solution for achieving this design? One method I have tried that seems to work is: .header{ margin-top:-10px; background:#fff; } Are there any alternate opti ...

problems arise due to padding and floating on the navigation bar

I have been facing a couple of challenges with my code. Firstly, I am trying to remove the small annoying line underneath my selected navigation links and also attempting to float both the header and footer to the right without losing their backgrounds. I ...

What is the most concise way to write this Xpath?

How can I retrieve the attribute value of an element using an absolute path like this: //*[@id="main"]/div[3]/div/div/div[3]/div[23]/div/div/div[1]/div/div/span/img I would like to know how to write code in relative xpath. Can you provide guidance on that ...

The persistent issue with JavaScript variables constantly resetting to zero is causing frustration

Currently, I am developing a small tile matching game where the variable "bestTime" saves the time taken to complete each session. The value of "bestTime" is then displayed as text using the variable "bestTimeTxt." Once a session is completed, a link will ...

Rearrange the characters within the variable before inserting them after

I'm currently dealing with an external system that generates outdated code, however, I do have access to css and javascript. The specific issue at hand involves working with a table that displays each item on a separate row, sometimes resulting in up ...

What is the process for submitting a form on consecutive URLs?

I have a form that requires input for settings and includes two buttons: one to save the form and another to both save and execute the settings. <form method="post" action="/settings/{{id}}/save"> <!-- input fields --> ...

The alignment of 5 boxes is off, failing to position them in the center of the page

Just dipping my toes into the world of programming. I managed to line up 5 boxes horizontally, but now I want to center them. The challenge is also making sure the boxes remain responsive. I've been scouring for ways to center a div, and all I come up ...