Center-aligned vertical Bootstrap 4 card collection

I am attempting to vertically align (center) the card deck below:

    <div class="container-fluid">
      <div class="card-deck d-flex justify-content-center">
        <div class="col-xl-2">
          <div class="card d-flex>
             ....
           </div>
        </div>
      </div>
    </div>

Here is the current look:

https://i.sstatic.net/ZCmr6.jpg

I have tried using my-auto, align-items-center, justify-content-center... but it does not seem to be working. What else could I be missing?

Thank you for your assistance!

htmlcssflexboxbootstrap-4

Answer №1

to vertically align any element, you can utilize the position: absolute; CSS property

for instance,

HTML

<div class="parent">
    <div class="element">I'm always<br/>In<br>Center</div>
</div>

CSS

.parent {
  height: 100%;
}

.element {
  position:absolute;
  top:50%; 
  left: 0;
  transform: translateY(-50%); 
}


.parent {
  height: 100%;
}

.element {
  position:absolute;
  top: 50%; 
  left: 0;
  transform: translateY(-50%); 
}
<div class="parent">
    <div class="element">I'm always<br/>In<br>Center</div>
</div>

OR

employing display: table-cell;

HTML

<div class="container">
    <div class="content">I'm always<br/>In<br>Center</div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    display: table;
}

.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.content {
    background-color: #dddddd;
    display: inline-block;
    text-align: center;
    padding: 5px;
    width:200px;
}

LIVE SNIPPET 

html, body {
    width: 100%;
    height: 100%;
    display: table;
}

.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.content {
    background-color: #dddddd;
    display: inline-block;
    text-align: center;
    padding: 5px;
    width:200px;
}
<div class="container">
    <div class="content">I'm always<br/>In<br>Center</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

Adding data to an AngularJS template

I am encountering an issue with a flag that I am toggling between true and false to alter the display of certain elements on my page. While it works outside of the template, integrating this value into the template itself has proven challenging. restrict: ...

javascripthtmlangularjs

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Is there a way to dynamically display Bootstrap tabs? I want the content in the tab to show when the link is clicked, and also have a close button. I need the tabs to be aligned in a single row without wrapping down if they don't fit. Here's an ...

jquerycsstwitter-bootstrap

Pattern Matching for Arabic Numerals

I'm currently working on a form with a validation JQuery function, and I've encountered an issue with the telephone field. I want users to input numbers only. The validation works perfectly on the English form, but when I try entering numbers usi ...

jqueryhtmlregexvalidationarabic

Tablist with interactive Bootstrap navigation on both the left and right sides

How can I create interactive navigation tabs with two tabs aligned to the left ("First" and "Second") and one tab aligned to the right ("More")? Currently, I can switch between "First" and "Second" without any issues. However, once I select "More," I can s ...

htmlcsstwitter-bootstrapbootstrap-4

Changing ch to Px in CSS

Important Notes: I have exhaustively explored all the questions and answers related to this particular topic. The question I have is very straightforward: How many pixels are equivalent to 1 character? Here's a sample of my code - code Related Sear ...

javascripthtmlcss

Display data from the current month for a specific ID in MySQL and present it in HTML tables based on ascending or descending order

Database connection successful. In my database, I have a table called "meal" and I am using the following SQL code: $sql = "SELECT * FROM ( SELECT date, month, day, breakfast, launch, dinner, meal_total, note FROM meal WHERE stid='$_SESSION[stid]&ap ...

phphtmlmysql

When I try to alter HTML using JS, I encounter an undefined error related to AngularJS

Using this specific function: function adjustContent(elemento){ if (document.getElementById(elemento).innerHTML.indexOf('&#10004;')>0){ document.getElementById(elemento).innerHTML=document.getElementById(eleme ...

javascripthtmlangularjs

Aligning Checkbox Labels for Web Forms

Can an image convey more than a thousand words? I'm looking to align the second (and following) lines with the first one. Any suggestions? Html stands for <input><span>text</span> ...

htmlcss

Ensure the top section of the page remains fixed in place

Looking to keep the header section of my webpage sticky at the top while allowing the content section to scroll over it? I need a solution using JavaScript or jQuery that will achieve this effect. Here is the HTML structure: <div id="header"> & ...

javascriptjqueryhtmlcss

How can the size of the font in a <div> be adjusted based on the number of characters present?

I am attempting to create a basic HTML and CSS layout with two div blocks, each 1000px wide, within a parent container that is 3000px wide. <div class="blocks"> <div class="block-a">text 1</div> <div class="block-b">text 2& ...

javascriptjqueryhtmlcss

When using the v-for directive to display all elements of an array, only the information of the clicked array should be listed when using the

I am facing an issue with my array of locations. There are 2 divs in play - one containing the list of locations and the other displaying additional info when a location is clicked. The problem arises when I click on a specific location, let's say Sc ...

javascripthtmlvue.js

PayPal form without encryption

Once upon a time, I recall creating a button in Paypal which provided me with a standard HTML form. However, now everything seems to be encrypted. Is there a way to retrieve an unencrypted format? I need to be able to manually adjust the price using jQuer ...

phphtmlencryptionpaypal

Navigate within an HTML element by utilizing the element's unique ID

I need to create a condition based on the presence of style="display:none;" in the following code snippet. <div class="wrap hide" id="post_query" style="display:none;"> </div> My goal is to identify whether style="display:none;" is included o ...

javascriptjqueryhtml

How can I resize the border to match the size of the text inside it?

Check out the following image to see how it appears:https://i.sstatic.net/RkMqI.png Here is an example code snippet of a message: .allMsg { width: 100%; } .self { border-radius: 1rem; background-color: #28a745; text-align: right; padding-lef ...

htmlcssborder

Including a .css file in ejs

I'm currently developing an application using Node.js (express) with EJS, and I'm facing an issue while including a .css file in it. When I tried the same setup as a standalone HTML-CSS project, it worked perfectly fine. How can I include the CSS ...

cssnode.jsexpressejs

What is the best way to optimize Bootstrap 5 grids for mobile responsiveness?

Within my portfolio, I have a projects section that switches between having the description on the left with an image on the right and vice versa. Despite my efforts to make it responsive, I'm struggling to figure out how to ensure the image appears a ...

htmlcssbootstrap-5

Capture all parameters in the URL, regardless of their names

Hello, I am currently utilizing the s:url tag to create a URL in my JSP file for pagination purposes. The issue I am facing is that when clicking on the previous link, it generates a URL in the address bar like someAction?previuos=prev. Similarly, when cli ...

htmljspstruts2

Ways to avoid data looping in jQuery Ajax requests

This is in relation to the assignment of multiple users using the Select2 plugin, Ajax, and API. The situation involves a function that contains 2 Ajax calls with different URLs. Currently, there are pre-selected users stored in the database. The selection ...

javascriptjqueryhtmlajaxjquery-select2

Tips for making inline elements match the line height

Consider this block element : <div style="background-color: gray; line-height: 30px;"> Some text and a <a style="background-color: yellow;">link<\a> <\div> Why is it that the yellow color does not extend the full hei ...

htmlcssblock

The issue with the <Button> component not properly linking in next.js

Having trouble with a button wrapped inside a custom Navbar component. The code snippet in question is: <NavBtn> <Link href="/contact" passHref> <Button> Contact Me </Button> </Link> & ...

javascriptcssreactjsnext.jsstyled-components