Entrance Chat Gallery Guilds Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
September 17, 2025 - @218.52 (what is this?)
Activity rating: Three Stars Posts & Arts: 45/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: :eyes: ~ Inconvenience is counterculture ~ :eyes: Guild Events: See A Bug Summer (share photos of any cool bugs you

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  HELP: Text does not want to be centered properly


« previous next »
Pages: [1] Print
Author Topic: HELP: Text does not want to be centered properly  (Read 866 times)
BlazingCobaltX
Hero Member ⚓︎
*****
View Profile WWW


⛺︎ My Room
StatusCafe: blazingcobaltx
RSS: RSS

Artifacts:
Suck At Something September - Did It!First 1000 Members!Joined 2023!
« on: October 03, 2023 @420.83 »

For my site I am using a premade template that has some odd quirks. One in particular is that, when using <center>, text doesn't fully center according to the box but according to the span of the text. Example page here.

Relevant (I think) CSS:
Code
.container{
display: flex;
flex-direction: column;
margin-left: 200px;
}
 
.boxgap{
display: flex;
flex-direction: column;
gap: 1rem;
}
 
.box{
display: flex;
flex-direction: row;
background-color: #fffefc;
border: 3px solid #967e68;
}

.left{
border-right: 3px solid #967e68;
padding: 0.7rem;
text-align: center;
}

.right{
padding: 1rem;
}

I've tried editing the display from flex to something else but the CSS seems highly unresponsive (same issue with changing font sizes). The only fix I've found is to make an entirely different div. This one somehow allows itself to be centered. What is happening?

Code
.scrollbox{
display: block;
flex-direction: row;
background-color: #fffefc;
border: 3px solid #967e68;
height: 500px;
overflow: auto;
}

Many thanks in advance.
Logged

TheNothingMonster
Sr. Member ⚓︎
****
View Profile WWW


Hey psst! Wanna see something spooky?
⛺︎ My Room
StatusCafe: thenothingmonster

Artifacts:
Great Posts PacmanFirst 1000 Members!Joined 2023!
« Reply #1 on: October 03, 2023 @531.08 »

<center> will act a bit strangely when working with flex properties. It's a kind of tag that is not really needed (nor suggested) when working with certain CSS stylings.

Whenever you want to center a div, I suggest you adding margin-right: auto; & margin-left: auto; to its properties.

Since the content you want to center are inside the ".right" div, you can just add these properties to it. That should do it! :ha:

Code
.right{
  padding: 1rem;
  margin-right: auto;
  margin-left: auto;
}

If something is not working for you, let me know!
Logged

~~~~~~~~~~~~
BlazingCobaltX
Hero Member ⚓︎
*****
View Profile WWW


⛺︎ My Room
StatusCafe: blazingcobaltx
RSS: RSS

Artifacts:
Suck At Something September - Did It!First 1000 Members!Joined 2023!
« Reply #2 on: October 03, 2023 @555.17 »

<center> will act a bit strangely when working with flex properties. It's a kind of tag that is not really needed (nor suggested) when working with certain CSS stylings.

Whenever you want to center a div, I suggest you adding margin-right: auto; & margin-left: auto; to its properties.

Since the content you want to center are inside the ".right" div, you can just add these properties to it. That should do it! :ha:

It worked!! Learned something again, thank you very much :4u: 
Logged

Pages: [1] Print 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi