Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Php

Styling On Element Wont Change

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

<divclass="images"><divclass="center"><p><?phpecho getGreeting(); ?></p><?php$moment = getTime()["moment"];  ?></div><imgsrc="images/<?phpecho$moment; ?>.png"alt="<?phpecho$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.

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;
}

.imagesimg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  z-index: -1;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<!DOCTYPE html><htmllang="nl"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><linkrel="stylesheet"type="text/css"href="site2.css"><title>PHP time based page</title></head><body><divclass="images"><divclass="center"><p>Good Morning</p><p>The time is 9:00 AM</p></div><imgclass="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><htmllang="nl"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><linkrel="stylesheet"type="text/css"href="site2.css"><title>PHP time based page</title></head><body><divclass="images"><divclass="center"><pclass="tac">Good Morning</p><pclass="tac">The time is 9:00 AM</p></div><imgclass="img"src="https://via.placeholder.com/900"alt="<?php echo $moment; ?>"></div></body></html>

Post a Comment for "Styling On Element Wont Change"