Bootstrap 5 Text can't be centered-CodePudding

I have to make a website for school, but for some reason I can't center Text. I want the Text to be in the middle of the Background picture. I tried everything but can't get it to work. Heres My HTML: pastebin.com/0tTLKH5u And here my CSS: pastebin.com/Nzy33fWe

CodePudding user response：

One solution is to make the whole body a flex and then adjust everything. That is a better solution, but would need a fairly large rewrite of the CSS. Quick solution is to make the text an absolutely positioned and center it. Adding the following CSS to the texts' class, should do the trick:

.display-1 {
  font-weight: 500 !important;
  letter-spacing: 40px;
  transition: ease-in 1s;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

The body is the relative element here, and your element is then moved to start at 50% top & left of the body, then positioned centered using translate by moving it -50% in both the axes.

CodePudding user response：

Is this something you want?

div {
  width:300px; 
  height:300px; 
  background-image: url("https://picsum.photos/300/300"); 
  color:#000; 
  text-shadow:2px 2px #fff;
  display:flex;   
  align-items: center;
  justify-content: center;
  font-size:30px;
 }

<div>Welcome</div>

CodePudding user response：

Attached an example where text is centered over the background image. I had used padding to align the text at the center from both horizontal and vertical fronts.

body {
  font-family: sans-serif;
  background: url("http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png");
}

h1 {
  text-align: center;
  display: inline-block;
  font-size: 52px;
  color: white;
  padding:20% 20%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/styles.css" />
  </head>

  <body>
    <h1>Hello PalowPower !</h1>
  </body>
</html>