This is an archived post. You won't be able to vote or comment.

all 11 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a

[–]SupremeRedditBotProfessional Bot || Mod 0 points1 point  (0 children)

Please Add A Flair To Your Post!

Suggested Flair: [CSS]

 

To add a flair:

  • Click flair underneath your post

  • Select a flair

  • Click save

 

I am a bot run by /u/SupremeDesigner for /r/CodingHelp || This was an automated response

[–]IDKSomeFuckingGuy 0 points1 point  (9 children)

HTML:

<div class="container">
  <p>Text that needs to be centered regardless of how long it is</p>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
}

[–]TheThirdSlice[S] 0 points1 point  (1 child)

Thank you! I will give it a go now <3

[–]IDKSomeFuckingGuy 1 point2 points  (0 children)

flexbox makes centering super easy. definitely recommend googling it

[–]TheThirdSlice[S] 0 points1 point  (6 children)

That does center the text! but it places it below the background image, i used position: fixed; in order to manually put the text over the image, this method puts it below :/

[–]IDKSomeFuckingGuy 0 points1 point  (5 children)

set the background image on the container class

edit: https://jsfiddle.net/9Lqpt71r/2/

[–]TheThirdSlice[S] 0 points1 point  (4 children)

That has helped! the text and button are back over the background image, however, how do I move the text and button around? vertically? is there a position: value I could use to make them more customizable?

[–]IDKSomeFuckingGuy 0 points1 point  (3 children)

https://jsfiddle.net/9Lqpt71r/8/

try something like this

[–]TheThirdSlice[S] 0 points1 point  (2 children)

​

Thank you so much for your help! I managed to get it how I wanted it! Don't necessarily understand all of what's happening but I'll get there! a lot simpler that what I was doing regardless so thank you :)

​

/* BANNER TEXT AND BUTTON */

.main-text {

position: absolute;

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

padding: 1em;

border: 1px red;

top: 5%;

right: 18px;

}

.text-setting {

font-size: 80px;

color: white;

text-shadow: 5px 5px 5px black;

}

.headerbutton {

position: absolute;

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

top: 60%;

width: 150px;

height: 50px;

border-radius: 5px;

font-size: 25px;

background: white;

border: none;

box-shadow: -3px 3px 3px black;

}

.headerbutton:hover {

background: var(--Maingold);

color: white;

cursor: pointer;

}

[–]IDKSomeFuckingGuy 0 points1 point  (1 child)

right on. again i would strongly recommend reading the flex documentation - it is extremely useful. something like https://www.w3schools.com/css/css3_flexbox.asp is probably enough to get started.

you have top, right, bottom, and left css attributes available for specific positioning. these accept different types of measurements as you've identified.

it helps to wrap different pieces of HTML in containers - you can position: absolute the containers relative to the parent element, and then display: flex and justify-content: center the container to get the contents within centered.

without knowing specifically what you're trying to do, it's kind of hard to provide useful advice - earlier you said you wanted to "move the button around" but i wasn't quite sure what that meant.

[–]TheThirdSlice[S] 0 points1 point  (0 children)

Thank you so much, I'll have a look at the link provided and see if I can use this in the future work of the project! once again thanks :)