如何将引导列中的项目居中，以使每个项目都从相对于 X 轴的相同位置开始？
Posted
技术标签:
【中文标题】如何将引导列中的项目居中，以使每个项目都从相对于 X 轴的相同位置开始？【英文标题】：How to center items in a bootstrap column such that every item starts in the same position relative to the X axis? 【发布时间】：2022-01-04 21:53:37 【问题描述】：为了复制我的问题，我编写了一个带有 2 个引导列的简单 html，我希望我的第二列有多个 <p> 项目，每个项目都在另一个之下，但是当包含的字符串时出现问题<p> 标签中的长度不同，因为我希望它们位于列的中心，但也从相对于 X 轴的相同位置开始。
<body>
<h2 class="text-center my-5">
title
</h2>
<div class="container">
<div class="row">
<div class="col-md-6 ">
Some unrelated text
</div>
<div class="col-md-6">
<p>Small text</p>
<p>A much longer text</p>
</div>
</div>
</div>
基本上我希望字符串“A much long text”正好在“Small text”下方，这样它看起来就是这样：
Small text
A much longer text
代替
Small text
A much longer text
我尝试使用 text-align:center 以及使用 flexbox 和 align-items:center 设置列的样式，但它们都产生相同的结果。
【问题讨论】：
我假设这仅适用于sm 及以下，当<p>s 堆叠时。在这种情况下，您仍然希望事物居中并以相等的左侧空间开始，或者（这可能看起来更好），从左侧开始一切？ （只说小屏）
我没有完全看到两个未格式化的<p> 元素的行为是如何不同的。您是否有任何影响p:first-child 或类似内容的CSS？答案可能是删除一些影响第一段的格式。
【参考方案1】：
使用 bootstrap 4 flex 框应该可以解决问题。在运行下面的代码时，您会发现引导响应将 col-md-6 放在 2 行中。在堆栈溢出之外运行代码应该会得到您想要的结果。
编辑：根据 OP 中的 cmets 添加了一些 javascript 代码以使文本居中
$( document ).ready(function()
let divLeft = $('#div-center-text').position().left;
let min = 0;
$('.center-text').each(function(i, obj)
let p = $(obj);
let pLeft = p.position().left;
if (min==0 || min>pLeft)
min = pLeft;
);
$('.center-text').each(function(i, obj)
$(obj).offset(left: divLeft + min);
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
<h2 class="text-center my-5">
title
</h2>
<div class="container">
<div class="row">
<div class="col-md-6 border">
Some unrelated text
</div>
<!-- .col-md-6 -->
<div class="col-md-6 border" id="div-center-text">
<div class="d-flex flex-column align-items-center w-100">
<p class="mb-0 center-text">Small text</p>
<p class="mb-0 center-text">A much longer text</p>
</div>
<!-- .flex-column -->
</div>
<!-- .col-md-6 -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</body>
</html>【讨论】：
也许我没有正确解释自己。我希望“更长的文本”的第一个字符正好低于“小文本”的第一个字符。从您的图片和提供的代码中可以看出，与“小文本”相比，“更长的文本”在左侧几个 px 处开始。此外，我希望两个字符串都居中（在您的代码中是正确的） @JoseDelgado 添加了一些 JS 代码以根据要求将文本居中。目前A much longer text 居中，Small text 与之对齐。要使Small text居中和其他对齐，请将min的条件更改为max【参考方案2】：
使用引导程序解决您的问题，您可以将页面中心的内容水平对齐。 试试下面的例子。
<div class="pricing4 bg-light" style="margin-top: -20px;padding-bottom: 25px;margin-bottom: -32px;">
<div class="container">
<!-- Row -->
<h2 style="text-align: center;padding: 40px;">This is improper content (div)</h2>
<div class="row justify-content-md-center">
<!-- Row -->
<div class="row justify-content-md-center" style="margin-left: 30px;margin-right: 30px;">
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<img class="card-img-top" src="https://i.ibb.co/GFrTmrm/dummy-size.jpg" >
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<img class="card-img-top" src="https://i.ibb.co/GFrTmrm/dummy-size.jpg" >
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
<!-- Column -->
<div class="col-md-3">
<div class="card card-shadow border-0 mb-4">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
<div class="pveventcard">Tuesday 11th May, 6:00PM</div>
<div class="p-3" style="height: 200px;">
<h6 class="font-weight-medium mb-0">The event is going bla</h6>
<h6 class="subtitle font-13">16/5/2021</h6>
<p>short description goes here short </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>【讨论】：
【参考方案3】：首先您需要在列中添加一个d-flex justify-content-center 类，然后在您的p 标记中添加一个div 父级，这样您的代码就会是这样的
<div class="container">
<div class="row">
<div class="col-md-6 ">
Some unrelated text
</div>
<div class="col-md-6 d-flex justify-content-center">
<div>
<p>Small text</p>
<p>A much longer text</p>
</div>
</div>
</div>
</div>
【讨论】：
正是我想要的，谢谢以上是关于如何将引导列中的项目居中，以使每个项目都从相对于 X 轴的相同位置开始？的主要内容，如果未能解决你的问题，请参考以下文章
如何知道单击项目在列表视图中相对于android中的屏幕的y位置