时间戳

首页 > 解决方案 > 在中心显示文本，但在屏幕尺寸缩小时左对齐

html - 在中心显示文本，但在屏幕尺寸缩小时左对齐

问题描述

我的意思是如下图所示。文本在大屏幕上居中，但在移动尺寸中向左移动。这只是一个示例布局，真正的布局有许多字体很棒的图标（下面有文字）作为菜单/导航排序，所以需要把它放在像这样的小盒子里

小提琴：https ://jsfiddle.net/msjncpL4/2/show

<div class="container">
<div class="row justify-content-center">
<div class="col-2 col-lg-2 col-sm-2 col-md-2 text-center">
  Medical Clinic
</div>
<div class="col-2 col-lg-2 col-sm-2 col-md-2 text-center">
  Hotel
</div>

</div>
  
</div>

我的意思是看起来像这样

真实灵感：

文本

标签： htmlcsstwitter-bootstrap

解决方案

发生这种情况的原因是因为您的 div 宽度远小于实际单词宽度 + 填充 在此处输入图像描述

有问题的类是col-2因为它增加了视口宽度的 16.66%。在 375 像素的移动设备中，这意味着总共约 62 像素。

您可以：

  • 增加百分比
  • 减小字体大小
  • 使用更灵敏的布局，使用 flexbox 或 grid。

推荐阅读