Do you have any insights on what could be causing the 'align-items:center;' command to not work properly?

I'm having trouble with the align-items property in my code. For some reason, it's not working as expected and I can't figure out why. Any suggestions or advice would be greatly appreciated!

Here is the snippet of code causing the issue:

HTML:

        <div data-aos="fade-in" class="head">
            <p class="head-text">Top Artists and Songs of 2023<p>
        </div>

CSS:

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300&display=swap');

body {
    background-color: #212121;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 0;
}

.head {
    background-color: #111111;
    color: #1d8954;
    filter: brightness(150%);
    width: 100%;
    height: 75vh;
    margin:0;
    align-items: center;
    text-align: center;
}
.head-text {
    font-size: 5rem;
    margin:0;
}

Apologies for the lengthy CSS code, wanted to make sure all information was provided. Below is the image showing the issue (text not vertically centered):

Click here to view the problem

htmlcss

Answer №1

Have you overlooked the display: flex property?

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300&display=swap');

body {
    background-color: #212121;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 0;
}

.head {
    background-color: #111111;
    color: #1d8954;
    filter: brightness(150%);
    width: 100%;
    height: 75vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head-text {
    margin:0;
}
<div data-aos="fade-in" class="head">
  <p class="head-text">Top Artists and Songs of 2023<p>
</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

Pressing the "Enter" key will trigger a JavaScript function while the textbox is in focus

I am looking to enhance my search functionality on my website. <div class="TextField Large"> <input type="text" name="q" id="SearchBox" /> </div> <div style="height: 40px; text-align: right; position: absolute; top: 0px; right: 0p ...

javascriptjqueryhtml

I want to create a Bootstrap 4 card deck that includes expand/collapse functionality for its content. The expanded content should only impact the current

I am experiencing an issue with my card decks and expand/collapse functionality. Currently, when I expand one card in the deck, all the other cards in the row also expand, leaving a large blank area. This becomes problematic especially when the content is ...

javascripthtmlbootstrap-4

Ways to center text vertically within a cell in a Bootstrap 5 table

I am trying to achieve vertical alignment in one of the cells of a table I created. According to the Bootstrap 5 documentation, the vertical-alignment utilities only affect certain elements like inline, inline-block, inline-table, and table cell elements. ...

htmlcsstwitter-bootstrapbootstrap-5

Upon loading the page, insert text into the <p> element

Currently in the process of developing a website. Below are the essential elements of the html <span class='codeId' id='codeId1'>456</span> <p class='codeDescription' id='description1'></p> ...

javascriptjqueryhtml

A picture placed side by side with a list

Could someone please help me figure out what I'm doing incorrectly? <div class="row"> <ul class='list-group .col-md-6'> <li>1</li><li>1</li><li>1</li> </ul> <div> ...

htmlcssbootstrap-4

Implementing the <bgsound> element in HTML

Can you explain the purpose of the <bgsound> element in HTML? ...

html

Choose a class and all its offspring as a selector

I possess the subsequent <label class="noblock"> <input> ... ... </label> Is there a method to indicate the CSS property display: inline for both the class noblock and its offspring (all elements within it)? ...

htmlcss

Horizontal Scroll HTML

Currently in the process of building a website for my father, everything is going smoothly. I followed a helpful Stackoverflow tutorial to create a specific webpage that I now want to customize with a hyperlink and make it scroll horizontally: Sliding divs ...

htmlcss

Altering the style of the underline for a hyperlink

I'm looking to customize the underline style when hovering over a link. Specifically, I want to change the color and size of the underlined link. const useStyles = makeStyles(theme => ({ button: { marginLeft: theme.spacing(2), }, }) ...

cssmaterial-ui

Safari fails to set a div to 100% of its parent's height

Currently, I am developing a website where the layout of a section is structured as follows: <div class="col-md-6"> <section class="right" data-type="background" data-speed="30" style="background: url(<?php echo get_field('book_image& ...

htmlcsssafaribootstrap-4

Placing a dropdown menu on top of an image

I currently have a slightly rotated menu bar with two buttons as an example: https://i.stack.imgur.com/0sI2P.jpg Due to the rotation, normal HTML handling is not feasible. I am considering using a <map> element to create hyperlinks over the menu it ...

javascripthtmlcssmenu

I am facing an issue in my Vue Project where the CSS does not recognize URLs enclosed in quotes

When attempting to pass over a quoted URL to background-image or cursor, I'm facing an issue where the file simply doesn't load. I am currently working with Vue and have installed the following libraries: Vuetify, SASS, SASS-Loader, and Node-S ...

javascripthtmlcssvue.jssass

What is the best way to position items of varying heights in alignment?

Can someone help me with this issue? I have a grid with 12 columns, each containing 2 identical icons and 2 texts of different heights. I need to align the icons in the center and make sure the texts are at the same height, but I'm having trouble achi ...

htmlcssbootstrap-5

Submit information into mysql using an html form (and beyond)

Hey there! I'm new to the world of MYSQL/PHP and currently working on a simple script to enhance my skills in php/mysql. However, I've hit a few roadblocks along the way. I apologize if some of these questions have already been asked before, but ...

phphtmlmysqlformsrow

Designing a uniquely shaped button

Is there a way to design a button with a slightly irregular shape? The current CSS for my button creates a basic rectangle like this: .btnclass { width:100; height:40; } However, I would like it to have a more unique appearance such as this: ...

css

Modify the background color of a div when it contains a particular string of text

https://i.sstatic.net/Ab5S9.png Looking for assistance with a basic jQuery script that can search for a specific text string. If the text is found, I want to change the CSS of the containing div. The HTML+CSS+JS code would be like: $(".ng-cell .ngCell ...

javascriptjqueryhtmlcss

The paths of youngsters and the application of conditional styling

Here is the scenario I am dealing with: <div class="parent"> <div class"routeA"> <div class="header"> <li></li> <li class="p-highlight"></li& ...

csssass

What is the best way to reduce the width of the preformatted tag?

Is there a way to adjust the width of the pre tag in order to avoid affecting the q-card when resizing the browser window? I am trying to create a q-card that can display code similar to what you see in ChatGPT. However, the q-card's size is not respo ...

htmlcssvue.jsquasar-frameworkquasar

Run JavaScript code whenever the table is modified

I have a dynamic table that loads data asynchronously, and I am looking for a way to trigger a function every time the content of the table changes - whether it's new data being added or modifications to existing data. Is there a method to achieve th ...

javascripthtmlangulartypescript

Generating a new division element with a unique identifier and subsequently making adjustments to it

Just starting out with HTML and JS here, so please excuse my lack of experience and not-so-great English. I have an ID on an HTML element that I want to add content to using a function. Additionally, I need to create another element (inside the first one) ...

javascripthtmlbootstrap-4frontende-commerce