当前位置：文江博客话题详情

CSS HTML bootstrap-5

Bootstrap正当中心合理不适合使用行flex

发布于 2025-02-11 07:04:42 字数 422 浏览 1 评论 0 原文

我有一个容器，我想集中在行类中的所有内容，但是当我提供正当中心时，它对我的div没有任何影响，是否有理由在行上起作用吗？

    <div class="container my-5">
   <div class="row justify-content-center">
    <hr class="col-4  border-2 border-top border-danger">
    <p class="col-4" >Skills and Abilities</p>
    <hr class="col-4  border-2 border-top border-danger">
   </div>
    </div>

任何帮助都将不胜感激。

原文

I have a container, I want to center align all the contents inside the row class, but When I provide justify-content-center, It doesn't have any effect on my div, does justify-content works on row ?

    <div class="container my-5">
   <div class="row justify-content-center">
    <hr class="col-4  border-2 border-top border-danger">
    <p class="col-4" >Skills and Abilities</p>
    <hr class="col-4  border-2 border-top border-danger">
   </div>
    </div>

any help would be really appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最美的太阳 2025-02-18 07:04:42

如果仍然不工作，请尝试此

 <div class="container row my-5">
   <div class="d-flex justify-content-center">
     <hr class="col-4  border-2 border-top border-danger" />
     <p class="col-4" >Skills and Abilities</p>
     <hr class="col-4  border-2 border-top border-danger" />
   </div>
 </div>

尝试更改

<hr class="col-4  border-2 border-top border-danger" />

为

<div class="col-4  border-2 border-top border-danger" />

Try this

 <div class="container row my-5">
   <div class="d-flex justify-content-center">
     <hr class="col-4  border-2 border-top border-danger" />
     <p class="col-4" >Skills and Abilities</p>
     <hr class="col-4  border-2 border-top border-danger" />
   </div>
 </div>

If still not work try to change

<hr class="col-4  border-2 border-top border-danger" />

<div class="col-4  border-2 border-top border-danger" />

回复收藏 0 原文

南笙 2025-02-18 07:04:42

理想情况下，您应该使用打算由人力资源标签的DIV标签。但是根据您的代码，只需在p标签中添加文本中心类即可。

 <div class="container my-5">
  <div class="row jusitfy-content-center">
    <hr class="col-4 border-2 mt-2 border-top border-danger" />
    <p class="col-4 text-center">Skills and Abilities</p>
    <hr class="col-4 border-2 mt-2 border-top border-danger" />
  </div>
</div>

这是最终输出

，如果您想实现上述结果。然后，不建议您的方法，您可以尝试以下方法：

 <div class="position-relative">
  <hr class="border border-danger" />
  <p class="position-absolute top-50 start-50 translate-middle bg-white fw-bold 
    text-black-50 px-4">
    Skills and Abilities
  </p>
</div>

Ideally you should use div tags intended of hr tags. But as per your code just add text-center class in p tag.

 <div class="container my-5">
  <div class="row jusitfy-content-center">
    <hr class="col-4 border-2 mt-2 border-top border-danger" />
    <p class="col-4 text-center">Skills and Abilities</p>
    <hr class="col-4 border-2 mt-2 border-top border-danger" />
  </div>
</div>

This is the final output

And if you want to achieve the above result. Then your approach is not recommend, you can try this:

 <div class="position-relative">
  <hr class="border border-danger" />
  <p class="position-absolute top-50 start-50 translate-middle bg-white fw-bold 
    text-black-50 px-4">
    Skills and Abilities
  </p>
</div>

回复收藏 0 原文

影子是时光的心 2025-02-18 07:04:42

您可以为此使用Flexbox或CSS网格。这比在文本后面添加彩色盒子更灵活。

这是html：

<h2>Title</h2>
<h2>Title number two</h2>
<h2>Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</h2>

/* Sample CSS */
body {
    background: linear-gradient(#A0BAF7, #4CACC1);
    min-height: 100vh;
}
h2 {
    margin: 30px 0;
    font: 700 2em/1.4 'Avenir', sans-serif;
    color: #FFF;
}

这是flexbox解决方案： https://codepen.io of

h2 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}
h2:before,
h2:after {
    content: '';
    border-top: 2px solid;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}
h2:after {
    margin: 0 0 0 20px;
}

在这里CSS网格解决方案： https://codepen.io/trys/pen/pen/pen/pen/pen/pen/pen/pen/pen/pen/pen/vjrzpa

h2 {
    display: grid;
    width: 100%;
    align-items: center;
    text-align: center;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    grid-gap: 20px;
}
h2:before,
h2:after {
    content: '';
    border-top: 2px solid;
}

You can use either Flexbox or CSS Grid for this. It will be more flexible than adding a colored box behind the text.

Here's the HTML:

<h2>Title</h2>
<h2>Title number two</h2>
<h2>Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</h2>

/* Sample CSS */
body {
    background: linear-gradient(#A0BAF7, #4CACC1);
    min-height: 100vh;
}
h2 {
    margin: 30px 0;
    font: 700 2em/1.4 'Avenir', sans-serif;
    color: #FFF;
}

Here's the Flexbox solution: https://codepen.io/trys/pen/vjRXLW/

h2 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}
h2:before,
h2:after {
    content: '';
    border-top: 2px solid;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}
h2:after {
    margin: 0 0 0 20px;
}

And here the CSS Grid solution: https://codepen.io/trys/pen/vjRzPa

h2 {
    display: grid;
    width: 100%;
    align-items: center;
    text-align: center;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    grid-gap: 20px;
}
h2:before,
h2:after {
    content: '';
    border-top: 2px solid;
}

回复收藏 0 原文

第几種人 2025-02-18 07:04:42

只需将 d-flex 添加到您的容器

链接flex boostrap：

<div class="container my-5">
   <div class="row d-flex justify-content-center">
    <hr class="col-4  border-2 border-top border-danger">
    <p class="col-4" >Skills and Abilities</p>
    <hr class="col-4  border-2 border-top border-danger">
   </div>
 </div>

Simply add d-flex to your container

Link Flex Boostrap : https://getbootstrap.com/docs/4.0/utilities/flex/

<div class="container my-5">
   <div class="row d-flex justify-content-center">
    <hr class="col-4  border-2 border-top border-danger">
    <p class="col-4" >Skills and Abilities</p>
    <hr class="col-4  border-2 border-top border-danger">
   </div>
 </div>

回复收藏 0 原文

ぇ气 2025-02-18 07:04:42

这似乎是添加文本中心最简单的，如下所示。

<div class="container my-5">
  <div class="row justify-content-center">
    <hr class="col-4 border-2 border-top border-danger" />
    <p class="col-4 text-center">Skills and Abilities</p>
    <hr class="col-4 border-2 border-top border-danger" />
  </div>
</div>

重要的是要确定在引导程序类中实际应用哪些CSS。我建议使用以下Bootstrap类搜索网站
态

It seems the simplest to add text-center as follows.

<div class="container my-5">
  <div class="row justify-content-center">
    <hr class="col-4 border-2 border-top border-danger" />
    <p class="col-4 text-center">Skills and Abilities</p>
    <hr class="col-4 border-2 border-top border-danger" />
  </div>
</div>

And it's important to find out which css are actually applied within the bootstrap class. I recommend using the following bootstrap class search site
bootstrapsearch

回复收藏 0 原文

~没有更多了~