What is the best way to align the text in the center of my h1 header?

Can anyone assist me with centering the contents of my h1 tag? 

h1{
width: 100%;
vertical-align: middle;
color: rgb(5, 5, 5);
font-size:25px;
letter-spacing: 0px;
top: 0;

text-align: left;

padding: 10;
}h1:after
{
    content:' ';
    display:block;
    border:2px solid rgb(122, 119, 119);
}

I am currently facing an issue with my CSS code and it is resulting in this output: https://i.sstatic.net/hpMbZ.png

UPDATE: I have corrected my h1 code, here is the updated version:

<div class="header">   
    <h1> <img src="/Physics Tutor/images/logo.jpg" height = "50">Physics Tutor Portal     
        <button><a href="Shiyun.html">Unanswered Question</a></button>
        <button><a href="index.html">Manage Quiz</a></button>
        <button><a href="Kim.html">Quiz Results</a></button>
        <button><a href="Yvonne.html">Student's Feedbacks</a></button>

        <style>

            button > a:hover {
              background-color: #df54d8;
            }

        </style>
    </h1>
    </div>
csslayoutstylescenter

Answer №1

Make sure to match the HTML heading tags (H1, H2) with their corresponding CSS styles for consistency. If you are using H2 in your HTML, ensure that it is styled as such in your CSS. Additionally, remember to include text-align:center; in your CSS to center align text as needed.

Answer №2

Your HTML tag referenced in CSS is different from the JSX code.Check out the live demo here

Here is the updated HTML:

<div class="content">
    <h1>Manage Quiz</h1> 
    <form id="add-cafe-form">
        <input type="text" name="question" placeholder="Quiz Question">
        <input type="text" name="right" placeholder="Right Answer">
        <input type="text" name="wrong" placeholder="Wrong Answer">
        <button>Add Question</button>
    </form>
    <ul id="esequiz-list"></ul>
</div>

And the revised CSS:

h1 {
    display: flex;
    justify-content: center;
    align-items: center;
}
h2{
    width: 100%;
    vertical-align: middle;
    color: rgb(5, 5, 5);
    font-size:25px;
    letter-spacing: 0px;
    top: 0;
    text-align: left;
    padding: 10;
}
h2:after {
    content:' ';
    display:block;
    border:2px solid rgb(122, 119, 119);
}

Answer №3

Please verify the changes I made to the code

HTML

<div class="header">   
    <h1>Physics Tutor Portal</h1>  
        <form>
          <button><a href="Shiyun.html">Unanswered Question</a></button>
          <button><a href="index.html">Manage Quiz</a></button>
          <button><a href="Kim.html">Quiz Results</a></button>
          <button><a href="Yvonne.html">Student's Feedbacks</a></button>
        </form>        
</div>

CSS

h1{
    width: 100%;
    vertical-align: middle;
    color: rgb(5, 5, 5);
    font-size:25px;
    letter-spacing: 0px;
    top: 0;
    text-align:center;
    padding: 10px;
}
h1:after{
    content:' ';
    display:block;
    border:2px solid rgb(122, 119, 119);
}
button > a:hover {
   background-color: #df54d8;
}

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

Encountered a Webpack issue when trying to load the primeng.min

I recently initiated a fresh project using yo aspnetcore-spa. My goal is to integrate the PrimeNG component library. Upon installing font-awesome and primeng: npm install font-awesome primeng --save I included CSS in the webpack vendor list: vendor: [ ...

cssangularwebpackprimeng

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

I recently incorporated jquery Galleria into my website and I am currently facing an alignment issue with the div element gallery-container. Interestingly, it appears correctly aligned in Chrome but is shifted to the right in Firefox. You can view the webs ...

jqueryhtmlcssjavascriptgalleria

The mobile-responsive dropdown navigation bar functions well on browsers with small widths, but does not work properly on my phone

I am experiencing an issue with the mobile responsive dropdown navigation bar on my website. It works perfectly fine on a small width browser, but when I try to open it on my phone, nothing happens. This is puzzling me as I am new to making websites respon ...

javascriptjqueryhtmlcss

The table spills over the container and disappears underneath the navbar

After downloading a template table from the internet and customizing it to my liking, I encountered an issue where it does not adhere to the assigned settings (as shown in the image), but that's not the only problem. The dropdown navbar on my website ...

htmlcssnavbarcss-tables

What is the best way to ensure a table is responsive while maintaining a fixed header? This would involve the table scrolling when it reaches the maximum viewpoint, while also keeping

Can anyone help me create a responsive table with a fixed header that scrolls when it reaches the maximum viewpoint without scrolling the entire page? I've tried using box-sizing: border-box; and overflow-x:scroll; but it didn't work. Any suggest ...

javascripthtmlcss

Activate the CSS on a click event using the onClick method

I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe ...

javascriptcssreactjs

Center a Bootstrap 4 card both vertically and horizontally without overflowing the screen

I am facing an issue with a single page layout where I have a centrally positioned card containing a form and text. Once the form is submitted, a list is displayed. However, sometimes the list is lengthy causing the card to cut off at the top with no scrol ...

csstwitter-bootstrapbootstrap-4

Maintain a consistent header height with CSS even when using the calc() function

--dis: calc(var(--max-height) - var(--min-height)); /* @media large{--min-height:13rem}; @media small{--min-height:6.5rem}; --max-height:75vh; */ --percent: calc(var(--scroll-ani) / var(--dis)); /* in js: document.body.style = "--scroll-ani: ...

javascripthtmlcss

The application of CSS rule shadowing is not consistently enforced

Why does the text in the selected element not appear yellow like the "char_t" link above, even though they have the same class? It seems like it should be yellow based on the inspector, but it's not displaying as such on the actual page. This issue is ...

cssfirefox

Can someone explain why line-height can affect the width in CSS?

Can you explain how the line-height property functions in CSS? I have noticed that when I set the line-height to be equal or less than the font size, it causes layout width issues. You can view an example of this problem on a jsFiddle here. Currently, my ...

css

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Can someone explain why my wrapper box doesn't fill the whole screen when I use width: 100%, but it does when I use width: 100vw? I have set "width=device-width" on my page and the minimum width for the page is 1400px. Thank you all for your assistan ...

css

Achieve full height Bootstrap styling by nesting it inside a row div

Is there a way to make the height of the left sidebar div equal to 100% within a row, based on the height of the right content? I have tried setting the height to 100%, but it doesn't seem to work. Any advice would be appreciated. <body> < ...

htmlcsstwitter-bootstrap

Implementing various style guidelines for distinct elements

Currently, I am struggling with organizing my unordered list elements to be stacked side by side. The style rule I have been using is as follows: #slide ul,li{ float:left; list-style-type:none; } Now, I am attempting to introduce another unordered list t ...

htmlcsscss-selectorshtml-lists

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

htmlcsscss-transitions

How to troubleshoot Bootstrap 5 tabs not hiding flex content after tab change?

Bootstrap 5 tab features a Leaflet map that we intend to occupy all remaining space once selected. We managed to achieve this, but now, when switching tabs, the content area of the first tab does not disappear. We suspect that the issue might be related t ...

csstwitter-bootstrapflexboxleafletbootstrap-5

Centered CSS navigation bar without any spacing between the buttons

Good evening everyone, I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'floa ...

htmlcss

Overlaying Div Concealed by Background Video Filter

Whenever we add a filter to our background video, the div overlay ends up moving behind the video and becoming hidden. To see an example of this issue, check out this fiddle showcasing the background video with the text overlay: https://jsfiddle.net/dyrepk ...

cssfilterwebkithtml5-video

What is the best way to include an image in a bootstrap carousel?

Can anyone help me troubleshoot my issue with fitting an image into the bootstrap carousel? I've tried adjusting the CSS, but it's not working. Any advice or suggestions would be greatly appreciated! Here is a screenshot for reference: https://i ...

htmlcsstwitter-bootstrap

Changing the border color in a CSS pseudo-class does not take effect upon clicking

Is it possible to change the border color of an input field when clicked using CSS? I attempted to use the pseudo-class focus for this purpose, but encountered some issues. It seems to only work on select elements and not on elements like text inputs. . ...

htmlcssbootstrap-4

Troubleshooting padding problem in mobile gallery view with Bootstrap

Having a problem with the gallery layout in Bootstrap. It looks great on desktop view, but on mobile, there's no space between images on the same row. On mobile, the images stack vertically without any spacing between them within a row. However, ther ...

htmlcssmobile