Question

我有一些span元素内的文字，我想左对齐它而不是现在居中的方式。我尝试使用CSS向右边和文本中心留一个边距但是没有用。你能告诉我怎么做吗？我想要左边的文字是＆＃34;（Jag arbetade：4-6 timmar / vecka）＆＃34;现在，如果你看my fiddle

，它会呈现居中

我想要更改的代码是

<div id="i4c2" class="artBaseRow">
    <div id="i4_tbl_11" class="artWrapper">
        <table class="srtbl" cellpadding="2" cellspacing="0" summary="">
            <caption><b>Vad var det bästa med kursen?</b></caption>
            <tbody>
                <tr class="srtbl-h1">
                    <th class="srtbl-qt">
                        <div>
                            <br /> <span>(Jag arbetade: 4-6 timmar/vecka)</span>
                        </div>
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</div>

所以文字＆＃34;（Jag arbetade ......＆＃34;在标题旁边左边对齐。我怎么能这样做？

Answer 1

它来自......

您已将文字放在标题<th>元素的表格中。在所谓的 用户代理样式表 中对font-weight: bold; text-align: center; <th>应用{标准}的标准浏览器行为。

......以及如何解决它。

您需要指定要覆盖此行为的内容，例如：

th {
    text-align: left;
}

Answer 2

问题是span元素有display: inline因此它的宽度与文本完全相同，就像它的一些父元素有text-align: center一样，它使得它位于中心，所以只做text-align: left并不起作用，所以你必须将其更改为display: block然后text-align: left

澄清：

span-element{
    display: block;
    text-align: left;
}

你也可以这样做：

span-element{
    display: inline-block;
    width: 100%;
    text-align: left;
}

Answer 3

将text-align: left;添加到此课程

.reportPage .srtbl .srtbl-h1 th, .reportPage .srtbl .srtbl-h1 td{
    text-align: left;
}

Answer 4

为srtbl-qt类添加此css（尝试将其放在CSS文件的末尾）

.srtbl-qt {
    text-align: left;
}

此外，我不知道为什么你需要div和break以及该文本周围的元素，但它可以删除（提示：th {padding-top: 10px;}）

如何使用CSS将文本移动到左侧？

4 个答案:

它来自......

......以及如何解决它。