Aligning a paragraph element within a header

I'm attempting to center the <p> element within the header, but it's consistently misaligned. I attempted placing it in a grid and consulted ChafGpt, but no solution worked.

I've also tried enclosing it in a container and applying "margin: 0 auto" to center it, however, it remains off-center. My goal is to have it perfectly centered, disregarding the logo, yet my efforts have been unsuccessful.

body {
  background-color: grey;
}

header {
  background-image: url('header.jpg');
  background-size: cover;
  background-position: center;
  padding: 20px;
  height: 10vh;
}

#logo {
  display: flex;
  max-width: 30%;
  max-height: 100%;
  float: left;
}

#page-description {
  color: white;
  padding: 15px 15px;
  font-size: 30px;
  margin: auto;
  text-align: center;
}
<title>XboxPulse - News</title>
<link rel="stylesheet" href="News.css">
<script src="News.js"></script>

<header>
  <img src="https://www.playourgames.nl/35770-medium_default/controller-wireless-xbox-pulse-red.jpg" alt="Xboxpulse" id="logo">
  <p id="page-description">News</p>
</header>

htmlcss

Answer №1

To center the paragraph both horizontally and vertically on the header, you can utilize flexbox and set the flex-direction to display each sibling element in a row. This allows the paragraph to occupy 100% of the screen width while maintaining its position relative to the image. Alternatively, you could employ positioning or floating techniques to remove elements from the DOM flow.

body {
  background-color: grey;
  margin: 0;
  padding: 0 1em;
}

header {
  background-image: url('header.jpg');
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
  min-height: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#logo {
  align-self: start;
  margin: 0;
  padding: 0.5em 0 0.6em;
}

#page-description {
  color: white;
  padding: 0.3em;
  font-size: 30px;
  margin: 0 auto;
  text-align: center;
  background-color: #707070;
  box-sizing: border-box;
  width: 100%;
}
<header>
  <img src="https://www.playourgames.nl/35770-medium_default/controller-wireless-xbox-pulse-red.jpg" alt="Xboxpulse" id="logo">
  <p id="page-description">News</p>
</header>

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

Issue with margin:auto in Internet Explorer 5

I have been experimenting with IE11's developer tools and discovered that when changing the browser mode, everything appears as expected in Edge, 10, 9, 8, and 7. However, in IE5, the div is forced to align to the left instead of the middle. Could so ...

htmlcssinternet-explorerinternet-explorer-5

Creating a transparent background for a Canvas animation with three.js and dat.gui

I'm struggling to set up a background animation on this canvas using three.js. However, the background renders as black instead of transparent. I attempted to adjust it with CSS by adding background-color:transparent;, but to no avail. I've searc ...

javascriptcsscanvasthree.jsdat.gui

How can I customize the styling of Autocomplete chips in MUI ReactJS?

Trying to customize the color of the MUI Autocomplete component based on specific conditions, but struggling to find a solution. Any ideas? https://i.stack.imgur.com/50Ppk.png ...

javascriptcssreactjsmaterial-ui

Positioning an element in the center of another using JQuery

Greetings! I am currently working with some elements that look like this: <div id="one">content</div> <div id="two">content</div> These elements are followed by another set of elements (without any parent, placed directly after th ...

javascriptjquerycsspositionpositioning

Updating pages dynamically using AJAX

There's a glitch I can't seem to shake off. I've successfully implemented AJAX for page loading, but an issue persists. When I navigate to another page after the initial load, the new page contains duplicate tags like <head> and <f ...

javascriptphpjqueryhtmlajax

Troubleshooting the issue with the htmlFor attribute

I have encountered an issue with creating radio buttons and labels using JavaScript. Despite adding the 'for' attribute in the label using 'htmlFor', it does not apply to the actual DOM Element. This results in the label not selecting t ...

javascripthtmlradio-buttonlabel

Instead of loading the HTML into the div, Ajax is now sending me the link instead

I have just begun working on a new laravel project and am currently working on the user profile page, which will include a sidebar with links like Portfolio, Account Settings, etc. My goal is to dynamically load each page into a div when a link in the side ...

javascripthtmljqueryajaxlaravel

Attempting to implement Ajax for my AddToCart feature while iterating through a form

At the moment, I am facing an issue where only the first item is being added to the cart and the page remains unchanged. On each page, there are a minimum of 3 items, with a new form created for each one. However, the other products do not get added to the ...

c#htmlajaxhtml.beginform

Choosing CSS/JS selector: Pick the final element with a class that does not match

My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class. I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuer ...

javascriptcssselectelement

`Nginx with a touch of material design`

Currently, I'm in the process of implementing material design UI on a functioning web application. The application utilizes Nginx, PHP, and PostgreSQL. While I have proficiency in PHP and PostgreSQL to ensure the functionality (code composed in notepa ...

htmlcssmaterial-design

Issues with CSS causing items to not line up in a single row

I'm currently working on an html/css page and trying to align the items of the agenda class in the same row, centered on the page. https://i.sstatic.net/8TjG8.png Here's the code I've been using: <html lang="en" xmlns="ht ...

htmlcss

Shrink image sizes using PHP

Currently I am trying to find a way to decrease the sizes of images using PHP when the page loads. Despite obtaining the dimensions, I am uncertain about how to proceed with reducing their sizes in PHP. Below is my existing code: <?php $stmt = $db-> ...

phphtml

Adjust the height of a div using jQuery once the AJAX call retrieves the data

There is a div that always matches the height of the adjacent div, depending on the content loaded in it. This setup was functioning properly until I implemented a search feature using jQuery. Now, when I perform a search, the element used in the jQuery ca ...

javascriptjquerycssajax

Limit the size of images with CSS properties like max-height or max-width

What is the preferred method for restricting the size of an image and why? While max-width can be used to restrict the size of an element, this article recommends using it specifically for images within containers. If you have a web application with a ve ...

css

Creating image filters using an object in jQuery

I am faced with a challenge where I have multiple image tags nested within a div that has the class google-image-layout. Each image is equipped with various data attributes, including: data-anger="0" data-disgust="0" data-facedetected="0" data-fear="0" da ...

javascriptjqueryhtml

Using <fieldset> allows you to display <select> elements in a vertical arrangement

As I work with this piece of html, JQuery populates my boxes and I am utilizing fieldsets to focus on only the necessary selection before POSTING it to my servlet. However, there seems to be an issue as the content is being displayed vertically when I ac ...

jqueryhtml

When using the HTML a tag, it can create unexpected gaps and

I have a sentence written in PHP that I've separated into individual word components using the explode function. foreach ($words as $splitword) { echo $splitword; /* echo "<a href = 'word.php?word=" . $splitword . "'>" . $spli ...

phphtmlcss

Cube with 3D attributes and text displayed on each face shatters upon reaching a specific time limit on Google Chrome (between

The issue appears to be specific to Chrome. In Chrome, the 3D cube's face or multiple faces become transparent, giving the appearance that the animation is breaking. Sometimes adding "backface-visibility" after the break can temporarily resolve the is ...

htmlcssgoogle-chrome

Creating a dynamic Bootstrap navigation bar using PHP

I created a website using bootstrap, but now I want to add more dynamic features. The tutorial I'm following for this does not involve the use of bootstrap. Am I missing something obvious here? Could you please review my code? (To avoid overloading t ...

phphtmlcssbootstrap-4

What steps are involved in converting .html files to .ejs format via terminal?

I'm currently working on a Node project and I have a bunch of HTML files that I need to convert to .ejs format. Does anyone know of a quick way to change all the .html files in my directory to .ejs using terminal commands? ...

htmlnode.jsterminalejs