An issue arises when attempting to vertically center text that overlaps

I am currently in the process of learning HTML and CSS with the help of Bootstrap-5

My goal is to have a two-line text perfectly centered both vertically and horizontally. However, I am facing difficulty in getting it aligned properly as it keeps overlapping. Despite spending an hour on trying to fix it, I am unable to figure out a solution.

Here is the code snippet I am working with:

<!-- Bootstrap 5.0.x -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706e706c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<h1 class="fw-light position-absolute top-50 start-50 translate-middle fs-1">Velkommen</h1>
<br>
<h1 class="fw-light position-absolute top-50 start-50 translate-middle fs-4">HTX 2021 - 2024</h1>

Current outcome:
https://i.sstatic.net/f56DP.png

htmlcssbootstrap-5

Answer №1

Instead of using <code>position: absolute;
, consider utilizing Flexbox for centering your text both vertically and horizontally!

  1. Wrap your elements in a container and add display: flex; to it: d-flex.

  2. For maintaining normal block-level behavior, use flex-direction: column: flex-column

  3. Center the text horizontally with align-items-center and vertically with justify-content-center

  4. To ensure vertical centering on the screen, the container height should match the screen height: Achieve this with vh-100

<!-- Bootstrap 5.0.x -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1453636d5671565657576b42546353474e53086f636a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="vh-100 d-flex flex-column justify-content-center align-items-center">
  <h1 class="fw-light fs-1">Welcome</h1>
  <br>
  <h1 class="fw-light fs-4">HTX 2021 - 2024</h1>
</div>

Answer №2

To make a simple adjustment, switch the class top-50 to bottom-50

<!-- Bootstrap 5.0.x -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120c120e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<h1 class="fw-light position-absolute bottom-50 start-50 translate-middle fs-1">Velkommen</h1>
<br> 
<h1 class="fw-light position-absolute top-50 start-50 translate-middle fs-4">HTX 2021 - 2024</h1>

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

Container Based Absolute Positioning in Bootstrap

I am struggling with aligning text properly within a container. I want it to look like the image, but the text keeps ending up at the far right side of the page. https://i.sstatic.net/aSsrC.png Could you assist me in achieving this? Thank you! HTML: &l ...

htmlcsscontainerspositioningabsolute

Position the div beneath another div using the display:grid property

I can't seem to figure out how to position a div below another div using display:grid. The div is appearing on top instead of below. The "app-bm-payment-card-item" is actually a custom Angular component. Here's the HTML file: //div wrapper < ...

htmlcssangularionic-frameworkcss-grid

"Nested list elements - The art of stylishly organizing content

Is there a way to apply a gray background color to alternate items in a list, even if they are nested, without affecting the styling of consecutive elements in the nested list? If anyone has any suggestions on how to achieve this using CSS or jQuery, plea ...

jqueryhtmlcss

Can you explain the differences between offsetHeight, clientHeight, and scrollHeight for me?

Have you ever wondered about the distinction between offsetHeight, clientHeight, and scrollHeight? What about offsetWidth, clientWidth, and scrollWidth? Understanding these differences is crucial for working effectively on the client side. Without this kn ...

javascripthtmldomoffsetheight

Tips for validating multiple inputs of the same type with identical names in JavaScript

I have limited experience with Javascript and am facing an issue with a HTML form that contains multiple input types with the same names occurring more than once. My goal is to validate the form before inserting the data into the database. I have managed t ...

phpjavascripthtmlformsvalidation

Submitting information via jQuery

https://i.stack.imgur.com/VU5LT.jpg Currently, I am working on integrating an event planner into my HTML form. However, I am facing difficulty in transferring the data ("meetup", "startEvent", "break") from HTML to my database. Using jQuery, I was able to ...

javascriptjqueryhtml

Can a new frame be created below an already existing frame in HTML?

My main.html file looks like this: ----- main.html---------------- <title>UniqueTrail</title> <script src="main.js"></script> <frameset rows='200,200'> <frame id='one' src="f ...

javascripthtmlapache-flex

PHP: implementing several forms on a single webpage

In my current situation, I need to display forms that resemble an Excel sheet with a submit button next to each row. When the submit button is clicked, the data is saved for that specific row, the row is disabled, and the focus automatically moves to the n ...

phpjqueryhtmlmysqlforms

Guarantee that unique events are triggered following h5validate events

I am currently experiencing a problem with H5Validate where its events are overriding the custom events I have implemented, causing my events not to trigger because they are based on H5validate events. To work around this issue, I have resorted to setting ...

htmljqueryvalidation

Why is it that injecting javascript within innerHTML seems to work in this case?

According to the discussion on this thread, it is generally believed that injecting javascript in innerHTML is not supposed to function as expected. However, there are instances where this unconventional method seems to work: <BR> Below is an examp ...

javascripthtmlajaxdom

Overriding PrimeNG styles with Bootstrap _reboot.scss

I'm facing an issue where Bootstrap is overriding my PrimeNG styles, particularly with its _reboot.scss file. I have included the relevant parts where I referenced it in both my styles.scss and angular.json files. Interestingly, I noticed that this is ...

htmlcsstwitter-bootstrapbootstrap-5primeng

transitioning from font-awesome v4 to the latest version, v5

For a while now, I have been utilizing a responsive template. However, I am interested in updating its fa-module from v4 to v5. By downloading the free web package, replacing "font-awesome.min.css" with "all.min.css", and adjusting all references to the ...

htmlcssclassfont-awesomeresponsive

A contact form overlaying a muted Google Maps view in an HTML website

Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page. After trying out a few solutions, I ende ...

htmlcssgoogle-mapsiframe

Using JQuery to trigger CSS3 animations on one element when clicking on another

My Rails app has a feature similar to reddit where users can upvote or downvote content. I'm currently working on creating a CSS3 animation that triggers when a user clicks the downvote button. Here's how I'm using JQuery: <div class="a ...

jqueryruby-on-railscss

Encountering a peculiar issue with Bootstrap 5 and SASS: the MIXIN @include _assert-ascending is

Currently, I am in the process of learning SCSS through a tutorial provided by freecodecamp. However, I have encountered an issue while using live sass where I keep receiving the error message below on the CLI: Error: Undefined mixin. ╷ 320 │ @incl ...

sassbootstrap-5node-sassscss-mixinsscss-lint

Adding rows to a database can be done by utilizing a dynamic form that consists of both repeatable and unique fields

Here is my follow-up post addressing the issue I previously encountered. Initially, I erroneously used mysql instead of mysqli, but I have now made the necessary updates based on recommendations. I have a form that contains variable sets of fields (rangin ...

phpjqueryhtmlformsmysqli

Unseen components and columns with Bootstrap 4

I am attempting to hide a checkbox input in the middle of some column elements using Bootstrap 4. <div class="container"> <div class="row"> <a class="col-2"> 1 of 2 </a> <input type="checkbox" class="invisibl ...

htmlcssbootstrap-4

Press anywhere else on the screen to dismiss the bootstrap menu

I've been attempting to find a solution for closing the Bootstrap menu when clicking outside of it in a mobile window size, but I just can't seem to make it work. I did manage to get it working when clicking one of the 'a' links using t ...

javascriptjquerycsstwitter-bootstrapmenu

The function of JQuery .click() is successful when used on a local machine, however it is not functioning

I am facing a puzzling issue. The code in question functions perfectly on my local server, but once I uploaded it to my hostgator server, a specific function no longer executes. When I set a breakpoint in the Firefox debugger, I noticed that the function i ...

javascriptjqueryhtmlcss

Unable to retrieve custom CSS and JS files hosted on the server

Encountering Server Issue My server is returning a 404 NOT FOUND error when trying to access my static files: css and js. In IntelliJ IDEA, the path appears correct as shown in the image https://i.stack.imgur.com/nTFv9.png. However, upon accessing the pa ...

javascriptjavahtmlcsstomcat