无法将列置于行中怎么解决？
无法将列置于行中怎么解决？
提问于 2018-06-13 06:53:24
我正在一个容器内的行中放置一列。该列应该居中对齐，因此文本。到目前为止，文本是居中对齐，但不是列。
这里是HTML和CSS -
HTML -
<section id="raised-section" class="main main-raised">
<div class="container">
<div class="text-section text-center">
<div class="row">
<div class="col-md-8 pos-center">
<h1 class="ft-roboto" style="font-weight: 800; color: #3C4858;">Sample Heading</h1>
<p class="ft-raleway" style="font-size: 1.15em; color: #999;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</section>
CSS -
.main {
background-color: #fff;
position: relative;
z-index: 3;
}
.main-raised {
margin: -100px 30px;
border-radius: 0.5em;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
0 6px 30px 5px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.text-section {
padding: 70px 0;
}
.pos-center {
margin-right: auto;
margin-left: auto;
}
仍然没有运气
回答 1
Stack Overflow用户
发布于 2018-06-13 16:43:54
Bootstrap有一个由12列组成的网格系统。
你的div取8，所以剩下4，你可以用col-md-offset-2它从左边两列推出，并在右边留下2，同时删除你定义的边界，因为它覆盖了boostap的边界。
.main {
background-color: #fff;
position: relative;
z-index: 3;
}
.main-raised {
margin: 100px 30px;
border-radius: 0.5em;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.text-section {
padding: 70px 0;
}
.pos-center {
/*margin-right: auto; REMOVED*/
/*margin-left: auto; REMOVED*/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section id="raised-section" class="main main-raised">
<div class="container">
<div class="text-section text-center">
<div class="row">
<div class="col-md-offset-2 col-md-8 pos-center">
<h1 class="ft-roboto" style="font-weight: 800; color: #3C4858;">Sample Heading</h1>
<p class="ft-raleway" style="font-size: 1.15em; color: #999;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</section>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008668
复制相关文章
相似问题