Question

请参阅this网站

如何让测试TEST位于包含在其中的范围的中间？

这是使用Twitter Bootstrap。

我尝试了很多不同的方法，比如css，内联样式，设置边距等，但是我无法完成所需的跨度。它似乎被绘制到它的文本的确切宽度。

我的主要目的是能够将文本Nationwide Alerts降低，使其与按钮位于同一行。

棘手的是，由于页面调整大小，我无法将此范围赋予硬编码宽度

保

Answer 1

只需添加一下，您现在就可以简单地使用css flexbox将文本放置在任何包含跨度的元素内。

原始链接不再有效，但是无论元素的大小如何，该链接都应使文本水平居中。

span { display: flex; 
       justify-content: center }

如果要垂直对齐，请使用align-items: center

Answer 2

在跨度上放置背景颜色以查看它无法正常工作的原因。这三个项目都在div中，没有与之关联的CSS。为了使跨度位于中间，你需要围绕它的div，至少要有宽度和宽度。文本对齐属性。

更改

        <div>
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

到

        <div class="centerTest">
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

用你想要的任何名字＆amp;使用

.centerTest {
    width:100%;
    text-align:center;
}

此外，使用此标记时，您的代码将导致跨度居中，但您必须将float:left添加到btnPrevious ID。除非您正在设计HTML电子邮件，否则我会尽可能地避免使用内联CSS，因此只需创建一个CSS文件，在CSS文件列表中包含LAST并将其编辑添加到那里。

例如，如果btnPrevious位于模板的CSS文件中，则在您的CSS文件中，只需添加

#btnPrevious {
    float:left;
}

你很好。

编辑：

很抱歉错过了Bootstrap部分，因为我刚刚在您的代码中搜索了TEST。 Bootstrap是使用这些类构建的，并且那些已经在容器内部，你应该能够将text-center添加到空白div中，它应该可以解决这个问题

更改

        <div>
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

到

        <div class="text-center">
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

Answer 3

正如您所怀疑的那样，Spans被绘制到它的文本的确切宽度。您可以通过将其样式设置为display: block; width: 100%;或任何您想要的宽度来规避此问题。这将使你的案例中的所有内容变得混乱，因为你在span本身之前和之后都有其他元素。

因此，您还需要将其位置设置为绝对位置。

Answer 4

使用bootstrap 2.3.0，你可以使用.text中心类

<span class="text-center">...</span>

以分页为中心的bootstrap 3

<span class="pagination-centered">...</span>

Answer 5

您也可以使用

margin-top: auto;
margin-bottom: auto;

或者如果使用TailwindCSS my-auto

如何在跨度中居文本？

5 个答案: