How can I center a span element inside a div?

Question

I'm building this app where I want this title centered. I want it such that when I hover my mouse hover the text it increases the font and changes color. At first I chose to use <div> but since it occupies an entire line, the text would get highlighted when I would hover the mouse not necessarily over the text but on any point of the line. So then I decided to use <span>and ran into the problem stated.

So I have this:

.welcome {
  border-width: 4px;
  border-style: solid;
  border-color: red;
  border-radius: 50px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -310px;
  margin-left: -600px;
  height: 600px;
  width: 1200px;
}

.button {
  color: green;
}

.button:hover {
  transform: scale(1.2);
  color: blue;
}

.title {
  font-size: 120px;
  /*
    float: center;
    align-content: center;
    text-align: center;
    */
  position: relative;
  top: 35%;
}

<div class="welcome">
  <span class="button title"> Mancala </span>
</div>

The part which is commented was my last try to center "Mancala", i.e., the span element.

I'm using two classes (button and title) because I will have multiple elements where I would them to highlight when hovered. Thanks in advance for the help!

Welcome To the StackOverFlow community! Your questions seem a bit confusing, please try to provide as much in-depth explanation of your problem as possible so everyone can understand WHAT exactly problem are you facing. Thank you :) — Ahad Aman, Nov 05 '21 at 21:43
You overwrote my edit with yours, so I rolled that back. I've created a snippet from your code, so no screen shots are necessary. Feel free to edit further. — isherwood, Nov 05 '21 at 21:49

score 1 · Accepted Answer · edited Nov 05 '21 at 21:52

Upon debugging your code, here's a solution. Replace your CSS code with this. What I did is I used the flex property. Since .welcome had a width of 1200px and using the commands display: flex; and justify-content: center; all of the content which was in the .welcome div will get centered horizontally.

    .welcome {
      border-width: 4px;
      border-style: solid;
      border-color: red;
      border-radius: 50px;
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -310px;
      margin-left: -600px;
      height: 600px;
      width: 1200px;
      background: orange;
      display: flex;
      justify-content: center;
    }
    
    .button {
      color: green;
    }
    
    .button:hover {
      transform: scale(1.2);
      color: blue;
    }
    
    .title {
      font-size: 120px;
      /*
        float: center;
        align-content: center;
        text-align: center;
        */
      position: relative;
      text-align: center;
      top: 35%;
    }

<div class="welcome">
  <span class="button title"> Mancala </span>
</div>

Awesome! That seemed to do the job. Just ran into another problem, when I add more `````` elements in the ```
``` they stay in the same line as "Mancala", even when I add ```
``` between them Would you mind helping me with that as well? — MooDoesCow, Nov 05 '21 at 22:01
@MooDoesCow yes, without the `display: flex` the components are stacked in columns and display: flex; makes all of the components which are within .welcome in a row. To specifically decide what should be the direction, if you want it column, you can use `flex-direction: column;` add this to `.welcome` as well as add `align-items: center;` to that div. — Ahad Aman, Nov 05 '21 at 22:03

score 0 · Answer 2 · answered Nov 05 '21 at 21:50

0

I thought this might work to use the div that uses welcome. Then, you can use text-align or use the flexbox to center your span tag inside the div.

answered Nov 05 '21 at 21:50

Jamarr Pettiford

1
1

2

Welcome. You should copy down the snippet from the question and edit it to demonstrate your solution. Please see [answer] for tips. We're not a discussion forum, so answers need to be specific and clear. – isherwood Nov 05 '21 at 21:50

How can I center a span element inside a div?

2 Answers2