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:

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

What is the CSS method for determining the distance from the top of a container to the edge of the window?

I am working on a basic HTML layout that contains a few elements, including a scrollable div container located below them. Since the height of unknown-height is uncertain due to dynamic element generation, I need a simple method to enable scrolling in the ...

htmlcss

What's the Best Way to Add a Border to My Two-Column Form?

I'm currently working on a reservation form for my website with a 2-column layout. In one column, I have tables, and I've been trying to add a divider between the columns but haven't found a solution yet. Despite researching ways to add a d ...

htmlformscssstylesmultiple-columns

When it comes to using jQuery, I find that it only functions properly when I manually input the code into the Google Chrome console. Otherwise

Below is the HTML snippet: <textarea cols="5" disabled id="textareRSAKeypair"> @Model["keypair"] </textarea> <a href="#" class="btn btn-primary" id="downloadKeypair">Download Key</a> Here is the jQuery code: <script src="ht ...

javascriptjqueryhtmlcss

Unusual Actions from the Text Field

Please take a look at this link <div id="textarea_wrapper"> <textarea>How and where is my width derived from?</textarea> </div> #textarea_wrapper{ height: 250px; border:thick solid green; } textarea{ background-color: #930; ...

csshtml

Tips for displaying a loading indicator above a form

I've been struggling to figure out how to display a loading indicator on top of my form without messing up the styling... My goal is to show the loading indicator when any action, like deleting an item or changing quantity, is triggered in React.js + ...

javascriptcssreactjsoverlaymobx-react

What is the best way to choose a specific div within a container that contains additional HTML elements?

I am facing an issue with selecting the second div tag within a section that contains 2 divs and an img tag. I attempted to use section div:nth-child(2), but it is targeting the second element inside the first div. However, my goal is to select the secon ...

htmlcss

What is the best way to showcase a full-screen overlay directly inside an iFrame?

As I work in HTML, I'm faced with a challenge - my iFrame is only taking up a small section of the screen (referred to as 'World' in the example below). What I want to achieve is creating a full-screen div overlay from that iFrame, but curr ...

htmlcssoverlay

Guide to positioning an image absolutely within a div

I am struggling to position a small close image within a div without success. The goal is for the image to always appear on the left side of the div, regardless of the content. The content consists of a text label with a maximum length of 8 characters. Iss ...

htmlcss

Please enter only numerical values using jQuery

Currently, I am facing a slight issue. My goal is to only run the code when the input characters are numbers. This is the snippet of code I have been working with: $(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .j ...

javascriptjqueryhtmlcssnumbers

What is the best way to vertically center elements within a navigation bar?

I'm currently working on a React application and I am trying to create a navigation bar. However, I am encountering some difficulties with aligning the elements in the middle of the nav bar layout. You can see the issue depicted in the image at this l ...

htmlcss

Tips for inserting the <style> element within a Vue.js component

Currently working with Vue.js v2, I am facing an issue where I have a CSS stylesheet stored as a string in a variable. import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass'; I am trying to generate a <style& ...

cssvue.jswebpackvuejs2

What is the best way to customize the appearance of a toggle switch using useStyles in Material UI, rather than withStyles?

I need help with customizing the styling of an input form switch in Material UI. I want the track and button to turn red when the switch is on, similar to this example. I have tried using the withStyles method following examples on the Material UI website, ...

cssreactjsmaterial-ui

The :before pseudo element doesn't seem to be functioning properly on Internet Explorer 11

The following code works well in Chrome and Mozilla, but unfortunately does not function correctly in IE11. I am attempting to apply a background color on hover to a div with the class .border-green, however this functionality is failing specifically in ...

cssstylesheet

Utilize ngFor in Angular Ionic to dynamically highlight rows based on specific criteria

I'm working on an application where I need to highlight rows based on a count value using ngFor in Angular. After trying different approaches, I was only able to highlight the specific row based on my count. Can someone please assist me? Check out m ...

javascriptcssangulartypescriptionic3

Is it possible to implement the SCSS CSS preprocessor in Angular 1.6.6, even though it is already utilizing LESS as the current CSS preprocessor?

Is it necessary to compile SCSS and Stylus files into CSS before importing them into my Angular version 1 app? Are there any other alternatives available? Context: I have two applications, one using Angular 4 with SCSS and the other using Angular 1 with L ...

cssangularjssassless

Each container has its own div counter

Help needed to complete this code. The task is to count the number of .resp-containers in each container separately. Then, based on that count, assign a corresponding class to each element within the containers. Check out the code here $(document).ready(f ...

javascriptjqueryhtmlcss

Internet Explorer experiencing printing issues

Can anyone explain why IE (8,9 Tested) is refusing to print the right side of this coupon on the red background? The left side (phone number) prints fine. Other browsers like Chrome and Firefox print the whole document correctly. To see the bug, you can ...

cssinternet-explorerprinting

What is the best way to resize an image in HTML based on a percentage of its height?

Within my HTML code, I have a PNG image that has been adjusted in size using CSS: .adjust-image { border:1px solid #021a40; display: block; width: auto; max-width: 100%; max-height: 1000px; } .img-container { position: relative; } ...

htmlcssimage

What is the best way to show hidden content within a masked div, similar to a tooltip?

In an icon-based menu, a grid consists of several <div> elements. Each element is empty with general CSS styling and inline CSS to set the mask effect. The purpose of using images as masks is to allow the icons to be colored in different ways by cha ...

cssmask

Turn off padding in material ui card

Currently, I am utilizing a material UI card and upon inspecting the card, I noticed the presence of this unique class: "MulticardContent-root". This class adds padding of 16 which I would like to remove. Strangely, it is not located within the styles co ...

cssmaterial-ui