Styling On Element Wont Change

May 06, 2023 Post a Comment

I've made a page where the images shown change time-based. On the page there is a text which says goodmorning/afternoon/evening/night and then the time is displayed next to it. Now

Solution 1:

Wrap <p><?php echo getGreeting(); ?></p> & <?php $moment = getTime()["moment"]; ?> in it's own div.

Then use flex or position absolute to centre

<div class="images">
    <div class="center">
        <p><?php echo getGreeting(); ?></p>
        <?php $moment = getTime()["moment"];  ?>
    </div>
    <img src="images/<?php echo $moment; ?>.png" alt="<?php echo $moment; ?>">
</div>

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}

.images {
  width: 100%;
  height: 100vh;
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

Solution 2:

you should add position: absolute; to your paragraph and then position it with the width and height property

if it is not working you should giv both elements a z-index: ;

Solution 3:

Try using the absolute position for image, flexbox for the content to center align the text.

Baca Juga

body {
  color: black;
}

p {
  font-size: 32px;
}

.images {
  position: relative;
  text-align: center;
}

.center {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.images img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  z-index: -1;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<!DOCTYPE html>
<html lang="nl">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="site2.css">
  <title>PHP time based page</title>
</head>

<body>

  <div class="images">
    <div class="center">
      <p>Good Morning</p>
      <p>The time is 9:00 AM</p>
    </div>
    <img class="img" src="https://via.placeholder.com/900" alt="<?php echo $moment; ?>">
  </div>

</body>

</html>

Solution 4:

CSS has an attribute called text-align, which has a possible value for center. This is what you need, please check the snippet below, where I ensured that this styling is inside a class that has the attribute.

body{
    color: black;
}

p{
    font-size: 32px;
}

.tac {
    text-align: center;
}

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="site2.css">
    <title>PHP time based page</title>
  </head>
  <body>

    <div class="images">
      <div class="center">
        <p class="tac">Good Morning</p>
        <p class="tac">The time is 9:00 AM</p>
      </div>
      <img class="img" src="https://via.placeholder.com/900" alt="<?php echo $moment; ?>">
    </div>

  </body>
</html>

Html5 Coding

Styling On Element Wont Change

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Styling On Element Wont Change"