Alignment of headline remains off-center despite having the text-center attribute

I'm currently developing a school project website and I'm facing an issue with centering my headlines.

Specifically, I can't seem to figure out how to center my h1. Everything else is working fine except for that particular headline.

I've experimented with various methods like using the Bootstrap text-center class, but none of them are producing the desired result.

I would appreciate any help in identifying errors I may have made. Thank you!

PS: Please overlook any grammatical errors in my English writing as I am working on improving it without relying on a translator.

<!doctype html>
<html lang="de">
    <head>
        <title>Virtual Reality - Headset Overview</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        ... (your remaining HTML code here) ...
      
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>


... (CSS styling rules continue here) ...
htmlcssbootstrap-4

Answer №1

To center your <h1> element, you can simply add the CSS property text-align: center;.

Update your CSS file like this:

h1 {
    font-family: "Open Sans";
    text-align: center;
}

Answer №2

Center Alignment with justify-content Property

To center align the text, simply apply the justify-content-center class to the <h1> element.

Updated code :

<h1 id="header-1" class="text-center justify-content-center h-100 row col-12 align-items-center display-1 w-100">VIRTUAL REALITY</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

Transmitting information from HTML to a server using node.js

Having trouble sending data to the server? When running server.js in Node, I find that req.body.username and req.body.password are always undefined after clicking the submit button. The HTML file opens in a browser, so it seems like that is causing the iss ...

javascripthtmlnode.js

Experience Image in an inverted carousel or Virtual Reality/Spherical environment

My goal is to create a virtual reality experience similar to this: https://i.sstatic.net/8pZx0.png However, my background image is 4096x1024 and I want it to have a VR effect where the center appears further away from the screen and the edges are slightl ...

csshtmlthree.jswebglaframe

Could Knockout's value binding potentially lead to a script injection vulnerability?

My understanding is that knockout effectively deals with this scenario, but I just want to double-check. Is it correct to assume that when using the value binding with a form control such as input/textarea, there is no risk of a script injection attack? O ...

htmlknockout.jsknockout-2.0

What is the best way to eliminate the "#" symbol from a URL?

I'm currently updating a website that features a hash symbol in every link when switching pages. This causes the page to not refresh everytime I switch, instead it stays on the last position of the site. Where can I locate the code responsible for th ...

javascripthtmlcsstypescriptvue.js

The buttons are off-center on the page when the screen width is below 1199px, they should be centered instead of aligned to the

Using Bootstrap 5, I've successfully created a layout with aligned rows of buttons at 1200px and above. However, an issue arises at the XL breakpoint (1199px) where the buttons align to the left of the container instead of being centered. You can vie ...

htmlcsstwitter-bootstrapbootstrap-5

When I update URLs in Django, my CSS breaks down

Recently, I encountered an issue on my website and found a solution by creating two separate HTML pages. However, when I modified the urls.py to differentiate the URLs for these pages, the CSS stopped working. Below is my code snippet and a detailed explan ...

pythoncssdjangourl

Guide on displaying the name attribute of a button along with its price in a separate div when clicked

Upon clicking the Koala button, I want to display a message showing the id name of the button and the corresponding price for Koalas. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link h ...

javascripthtmloop

The Next button in the PHP code is not functioning properly

Currently, I am working on implementing two buttons - Next and Previous. In my PHP file, I have the following line of code which calls a function defined in another PHP file. The purpose of this function is to navigate to the table where I am located and s ...

phpjquerycss

The issue with the page not appearing correctly on IE9 is currently being resolved

I am utilizing bootstrap alongside a bootswatch theme and HTML5 boilerplate to design a webpage. While it appears correctly on Chrome and Firefox, the display is off on IE9 and IE8 mode. However, everything works fine when compatibility mode is enabled in ...

csshtmltwitter-bootstrapinternet-explorer-9bootswatch

A pair of HTML elements linked by a solitary JavaScript event listener

My JavaScript code looks like this: //for dom element 1// $(document).on( 'click', '.dom1', function() { something; }); //for dom element 2 $(document).on( 'click', '.dom2', function() { something; }); Bot ...

javascriptjqueryhtmldom

What is the best way to trigger a javascript modal to open automatically after a specific duration

Let's take an instance where my modal has the ID #modal1. It usually appears through a button-based action. ...

javascripthtmltwitter-bootstrapbootstrap-modal

"Despite using the same CSS and HTML code, the fonts appear distinct from each

Feeling lost here, not understanding what's going on. I made changes in Elementor on my first PC and later noticed that the font looked a bit different. I tried to revert the changes but had no luck. I also work on my second PC where the browser showe ...

htmlcssfonts

Assign the filename to the corresponding label upon file upload

I've customized my file uploader input field by hiding it and using a styled label as the clickable element for uploading files. You can check out the implementation on this jsFiddle. To update the label text with the actual filename once a file is s ...

javascriptjqueryhtmlformsfile-upload

What are some creative methods to apply CSS styling to material-table in React?

I've spent several days searching for a solution without any luck. My project involves using material-table in React, and I am struggling to apply CSS styles to the headers (columns) and content (such as changing font size, adjusting width, and creati ...

cssreactjsmaterial-uimaterial-table

resizing problem with images that adapt to different screen sizes

I've been working on creating a responsive website, but I'm having trouble with the resizing of the two background images I added to the header. When I view the site on a mobile device, the header appears squashed. I think this might be because I ...

htmlcssresponsive-designcss-animations

Interactive Timeline - Adjust color on click

I am having trouble implementing a timeline and changing the color when clicking on different states. Can anyone help me figure out what the issue is or how I can achieve this? I intended to give each state a different color, but sadly, it didn't wor ...

htmlcssangulartypescript

Can BEVM be deemed legitimate or should we solely rely on the modifier?

Exploring Chainable BEM Modifiers I recently came across the concept of chainable BEM modifiers and I'm excited to incorporate this idea into my next project. However, upon checking getbem.com, I discovered that it's not recommended to use a mod ...

htmlcssbem

How to target the attribute value of an image element that has a specific parent class using jQuery

I'm working with a list that looks like this: <ul> <li><div class="thumb"><img src="image-1.jpg"></div></li> <li><div class="thumb"><img src="image-2.jpg"></div></li> <l ...

jquerycss

When selecting an option in the burger menu, the dropdown does not react properly

I am facing an issue with the burger menu where one of the options should trigger a dropdown, but the content is not adjusting properly. The dropdown menu should push the other content downward, but currently, it overlaps. I have included the code for th ...

htmlcssdrop-down-menumedia-queries

Saving filters in URL for easy bookmarking

My latest project involves developing a straightforward single-page application that allows users to sort entries by name and other attributes. What I want to achieve is a method of storing the current sorting selection (similar to PHP Get) without navig ...

javascripthtmlangularjsajax