将文本居中对齐

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：

位置：绝对

将文本居中对齐

Align text in center of page

html

css

jinja2

semantic-ui