时间戳

首页 > 解决方案 > 无法对齐文本

html - 无法对齐文本

问题描述

我为游戏制作了一个资源，但是当我想将文本对齐到中心时它不起作用。我想将它居中，以便文本位于框/类的中心。

.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>

标签： htmlcss

解决方案

这是因为你在使用flexbox所以text-align不能直接在 flex 容器中使用（menuoption）。

您可以使用该justify-content: center属性来做您期望的事情

有关 Flexbox 属性的更多信息： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

推荐阅读