对齐页面中心的文本

Question

我正在尝试将文本对齐到页面的中心，当我这样做时它会起作用：

<div class="ui divider"></div>
<div id="questions" style="margin-left:auto;margin-right:auto;">

{% for question in questions %}

    <h3 class="ui left floated header"><u>{{ question.position }}.</u></h3>

<div class="question">


<div class="question_text" style="display:flex;justify-content:center;align-items:center;padding-bottom:1%;">

{{ question.question_text }}
</div>

<div class="question_stars" style="display:flex;justify-content:center;align-items:center;">
    <div class="ui star rating massive" data-max-rating="5">
      </div>
    </div>
</div>
<div class="ui divider"></div>

{% endfor %}
</div>

当我尝试使用以下内容添加问题编号时：

<div class="ui divider"></div>
<div id="questions" style="margin-left:auto;margin-right:auto;">

{% for question in questions %}
<div>
    <h3 class="ui left floated header"><u>{{ question.position }}.</u></h3>

<div class="question">


<div class="question_text" style="display:flex;justify-content:center;align-items:center;padding-bottom:1%;">

{{ question.question_text }}
</div>

<div class="question_stars" style="display:flex;justify-content:center;align-items:center;">
    <div class="ui star rating massive" data-max-rating="5">
      </div>
    </div>
</div>
</div>
<div class="ui divider"></div>

{% endfor %}
</div>

正如您在第二张图片中看到的那样，星星和问题稍微向右移动。根据问题，文本将有所不同。

如何防止这种情况发生？

Answer 1

由于H3标签的宽度（问题位置），星星被推向右侧。您的H3块和div.question块并排浮动。

为避免这种情况，请尝试从流中删除H3，并将以下样式添加到H3：

位置：绝对