18910140161

HTML-如何使用justify-content或align-self将其居中?(仅限于引导)-堆栈溢出

顺晟科技

2022-10-18 12:13:57

16

这是我的代码,由于某种原因,我无法将其居中。我已经为每个行和列类尝试了justify-content和align-items,但它不起作用。我使用的是4.6引导的CDN.

这个:

link rel=";样式表";href=";UNK1@4.6.0/dist/CSS/bootstrap.min.CSS";完整性=";sha384-b0vp5xmatw1+k9krqjqerjvtumqw0npezvf6l/z6nronj3ouofufpcjeuqouq2+l";crossorigin=";匿名";

我需要4个Lorem Ipsum在断点(MD,LG)中居中。提前感谢!

<代码><;部分>;<;DIV类=";集装箱VH-100 “ ”>;<;DIV类=";ROW ROW-COLS-1 ROW-COLS-MD-2 BG-INFO  <;DIV类=";COL COL-MD-6 COL-LG-12";>;<;H3>;我的值<;/H3>;<;/DIV>;  <;DIV类=";COL BG-DANGER COL-MD-6 COL-LG-3";>;1 Lorem ipsum<;/DIV>;<;DIV类=";COL COL-LG-3偏移-MD-6偏移-LG-0";>;2 Lorem ipsum<;/DIV>;<;DIV类=";COL COL-LG-3偏移-MD-6偏移-LG-0";>;3 Lorem ipsum<;/DIV>;<;DIV类=";COL COL-LG-3偏移-MD-6偏移-LG-0";>;4 Lorem ipsum<;/DIV>;<;/DIV>;  <;/DIV>;  <;/DIV>;<;/部分>;

顺晟科技:

你有没有试过用类";row row-cols-1";添加到容器中?D-Flex类?

<代码><;部分>;<;DIV类=";容器VH-100 “ ”>;<;DIV类=";ROW ROW-COLS-1 ROW-COLS-MD-2 BG-INFO文本中心";>;<;DIV类=";COL COL-MD-6 COL-LG-12";>;<;H3>;我的值<;/H3>;<;/DIV>;<;DIV类=";COL BG-DANGER COL-MD-6 COL-LG-3";>;1 Lorem ipsum<;/DIV>;<;DIV类=";COL COL-LG-3偏移-MD-6偏移-LG-0";>;2 Lorem ipsum<;/DIV>;<;DIV类=";COL COL-LG-3偏移-MD-6偏移-LG-0";>;3 Lorem ipsum<;/DIV>;<;DIV类=";COL COL-LG-3偏移-MD-6偏移-LG-0";>;4 Lorem ipsum<;/DIV>;<;/DIV>;<;/DIV>;<;/DIV>;<;/部分>;

文本中心类添加到<section> <div class="container vh-100"> <div class="row row-cols-1 row-cols-md-2 bg-info"> <div class="col col-md-6 col-lg-12"><h3>My Values</h3></div> <div class="col bg-danger col-md-6 col-lg-3 ">1 lorem ipsum</div> <div class="col col-lg-3 offset-md-6 offset-lg-0">2 lorem ipsum</div> <div class="col col-lg-3 offset-md-6 offset-lg-0">3 lorem ipsum</div> <div class="col col-lg-3 offset-md-6 offset-lg-0">4 lorem ipsum</div> </div> </div> </div> </section>

您可以使用Bootstrap框架提供的默认类.text-center,并将其添加到父元素中,以使所有文本居中。

改变这条线,项目将在中心对齐。

<代码><;节类=";文本中心";>;
  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航