当前位置: 首页 > 面试题库 >

在引导响应页面中如何将div居中

巫马浩言
2023-03-14
问题内容

我需要使用引导程序通过将div定位在页面中心来创建响应页面,如下面提到的布局。


问题答案:

Bootstrap 4的更新

使用flex-box简化垂直网格对齐

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');

html,

body {

  height: 100%

}


<div class="h-100 row align-items-center">

  <div class="col" style="background:red">

    TEXT

  </div>

</div>

Bootstrap 3的解决方案

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

 html, body, .container-table {

    height: 100%;

}

.container-table {

    display: table;

}

.vertical-center-row {

    display: table-cell;

    vertical-align: middle;

}


<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>



<div class="container container-table">

    <div class="row vertical-center-row">

        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>

    </div>

</div>

这是一个以所有屏幕尺寸为中心的水平和垂直div的简单示例。



 类似资料:
  • 我正在使用如下所示的引导网格,我正在尝试集中一些div。(图片)。我已经尝试了所有{边距:0自动;宽度:50%}等,但我无法解决。集中一些div不会那么难。这里有什么问题?请不要将其标记为重复。我已经研究了一整天,我就是无法解决。谢谢

  • 我如何让图像垂直居中Div/Row.我已经搜索过了,但所有的解决方案似乎都指向这是一个好的解决方案——但它对我不起作用。我正在使用Bootstrap 3... https://www.bootply.com/vQFalT6KxG

  • 我有一个引导行,其中包含数量可变的div,它们需要相对于父行居中。到目前为止,html设置如下: 我用javascript克隆并附加到内部。项目容器的数量可变。项目。它很好用,如果有问题的话。项目超过3个,由于网格配置,它们可以正确地包装到其他行上。我无法实现的是将这组div集中在其父对象中。 将“.text center”指定给父级不起作用 父对象上的文本对齐和子对象上的内联块不起作用 使父级灵

  • 问题内容: 我有一个宽度为100%的div。 我想将按钮居中放置,该怎么办? 问题答案: 更新的答案 由于我注意到这是一个积极的答案,所以进行了更新,但是Flexbox现在是正确的方法。 现场演示 垂直和水平对齐。 只是水平的(只要主伸缩轴是水平的,这是默认值) 使用固定宽度且没有flexbox的原始答案 如果原始海报想要垂直和居中对齐,则对于固定按钮的宽度和高度非常容易,请尝试以下操作 CSS

  • 我试图垂直(和水平)中心div(高度和宽度未知)在引导列。我可以水平中心的div设置文本对齐到中心。然而,我正在努力垂直居中的div。下面是我的代码片段: 提前感谢!

  • 由于某些原因,这2个表不会居中,我尝试了引导容器类,尝试了边距0自动。但他们不会打中间的,知道吗? 我希望两个表居中,并在中间水平显示并排。 在这里的codepen上:在这里输入链接描述http://codepen.io/satearn/pen/ybvxlr