Can't align text

Question

I made a resource for a game but when I want to align the text to the center it doesn't work. I want to center it so the text will be in the center of the box/class.

.menuoption {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin: 15px;
  text-align: center;
  color: white;
  font-family: BebasNeueBold;
  height: 50px;
  width: 50%;
  background: black;
  /*#0C5CBC;*/
  margin-top: -7px;
  padding-left: 7px;
}

<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<link href="tattooshop.css" rel="stylesheet" type="text/css" />
<script src="tattooshop.js" type="text/javascript"></script>

<center>
  <div id="tsContainer" style="display: none;">
    <br>
    <div class="title">Choose a Body Part</div>
    <div class="menuoption" data-cat="1">Torso</div>
    <div class="menuoption" data-cat="2">Left Leg</div>
    <div class="menuoption" data-cat="3">Right Leg</div>
    <div class="menuoption" data-cat="4">Left Arm</div>
    <div class="menuoption" data-cat="5">Right Arm</div>
    <div class="menuoption" data-cat="6">Head</div>
    <br>
    <div class="resetoption" data-opt="1">Remove Tattoos for Current Part</div>
    <div class="resetoption" data-opt="2">Remove All Tattoos</div>
    <br>
    <div class="saveoption">Save All Tattoos</div>
    <br>
    <br>
    <div class="exitoption">Exit Tattoo Shop</div>
  </div>
  <div id="tatNamesContainer" style="display: none;">
    <br>
    <div class="title">Tattoos</div>
    <div id="tatNames">

    </div>
  </div>
</center>

score 2 · Accepted Answer · answered Feb 01 '20 at 23:57

This is because you're using flexbox so text-align can't be used directly in the flex container (menuoption).

You could use the justify-content: center property to do what you expect

For more information about Flexbox poperties: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 1 · Answer 2 · answered Feb 02 '20 at 00:00

If you're trying to center the text inside the black divs (hidden in your code) you can just add justify-content: center; to your class. This will center your text when using display: flex.

.menuoption {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 15px;
  color: white;
  font-family: BebasNeueBold;
  height: 50px;
  width: 50%;
  background: black;
  margin-top: -7px;
  padding-left: 7px;
}

<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<link href="tattooshop.css" rel="stylesheet" type="text/css" />
<script src="tattooshop.js" type="text/javascript"></script>

<center>
  <div id="tsContainer">
    <br>
    <div class="title">Choose a Body Part</div>
    <div class="menuoption" data-cat="1">Torso</div>
    <div class="menuoption" data-cat="2">Left Leg</div>
    <div class="menuoption" data-cat="3">Right Leg</div>
    <div class="menuoption" data-cat="4">Left Arm</div>
    <div class="menuoption" data-cat="5">Right Arm</div>
    <div class="menuoption" data-cat="6">Head</div>
    <br>
    <div class="resetoption" data-opt="1">Remove Tattoos for Current Part</div>
    <div class="resetoption" data-opt="2">Remove All Tattoos</div>
    <br>
    <div class="saveoption">Save All Tattoos</div>
    <br>
    <br>
    <div class="exitoption">Exit Tattoo Shop</div>
  </div>
  <div id="tatNamesContainer" style="display: none;">
    <br>
    <div class="title">Tattoos</div>
    <div id="tatNames">

    </div>
  </div>
</center>

Can't align text

2 Answers2