bootsrap 屏幕居中显示文字

要使文本在屏幕中央水平和垂直居中，可以使用以下HTML和CSS代码：

HTML代码：

<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center vertical-center">
      <h1>居中显示的文本</h1>
    </div>
  </div>
</div>

CSS代码：

.vertical-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

这里使用了Flexbox布局，将文本框垂直和水平居中。同时，使用了Bootstrap的栅格系统，将文本框放置在一个容器中，并使用`text-center`类将文本水平居中。

相关问题

bootstrap文字居中

引用中提到，在Bootstrap中使文本居中可以通过在元素的class中添加"text-center"来实现。例如，可以使用以下代码将h1元素居中对齐：

<h1 class="text-center">文本</h1>

另外，如果想要在特定屏幕大小下使文本居中，可以使用Bootstrap的栅格系统。例如，可以在col-md-6元素中添加以下class来使其水平居中：

<div class="col-md-6 mx-auto"></div>

这将使该列在中等屏幕大小下居中对齐。

移动端bootstrap订单列表显示

### 使用 Bootstrap 创建移动设备上的订单列表布局

为了确保在移动设备上提供良好的用户体验，可以利用 Bootstrap 的栅格系统来构建响应式的订单列表布局。由于 Bootstrap 是移动优先的设计框架，在较小屏幕上默认采用单列布局。

对于订单列表而言，通常每一项都包含多个部分的信息，比如商品图片、名称、价格以及操作按钮等。通过合理设置类名可以让这些组件按照预期排列：

- 利用 `container` 或者 `container-fluid` 来定义容器宽度[^1]。
- 运用 `.row` 和 `.col-*` 类组合创建弹性网格结构，其中 * 可以为 sm, md, lg, xl 表示不同断点下的列数或比例。

下面是一个简单的 HTML 结构实例展示如何应用上述原则制作一个适合手机查看的订单详情页片段：

<div class="container">
  <div class="row mb-3">
    <!-- 订单标题 -->
    <div class="col text-center">
      <h2>我的订单</h2>
    </div>
  </div>

  <!-- 单个订单条目开始 -->
  {% for order in orders %}
  <div class="card mb-4 shadow-sm">
    <div class="card-body row g-0">

      <!-- 商品缩略图 -->
      <img src="{{order.product_image}}" alt="Product Image" class="col-3 img-thumbnail"/>

      <!-- 主要信息区域 -->
      <div class="col ms-3 d-flex flex-column justify-content-between">
        <ul class="list-unstyled m-0">
          <li><strong>{{order.name}}</strong></li>
          <li>数量: {{order.quantity}}</li>
          <li>单价: ¥{{order.price}}</li>
        </ul>

        <!-- 底部的操作链接/按钮 -->
        <a href="#" class="btn btn-primary">查看详情</a>
      </div>
      
    </div>
  </div>
  <!-- 单个订单条目结束 -->

  {% endfor %}
</div>

这段代码展示了基本的商品卡片样式，当屏幕较小时（如智能手机），图像和文字描述会垂直堆叠；而当屏幕变大时，则水平并排显示。此外还加入了间距调整(`mb-`)使各元素之间保持适当距离，并且使用了居中的文本对齐方式提升美观度。