作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在一个父 div 中包含 3 个 div (class="row services"
)。
我怎样才能使三个 col s12 l3
div 集中在这个父 div 中?
我试过使用 display:block
和 text-align:center
但这似乎没有效果。
HTML:
<div class="row services">
<div class="col s12 l3">
<div class="divider"></div>
<h5><p>Nelson Mazda Tulsa</p> <p>Tulsa, OK</p></h5>
<p>9902 S. Memorial Dr.</p>
<p>Tulsa, OK 74133</p>
<p>866-612-0040</p>
<a href="http://www.nelsonmazdaok.com/mazda-dealer-tulsa-ok/car-dealership-near.html" class="btn waves-effect waves-dark white black-text">Get Directions</a>
<p>
<a href="http://www.nelsonmazdaok.com/" class="btn waves-effect waves-dark white black-text">Visit Website</a>
</div>
<div class="col s12 l3">
<div class="divider"></div>
<h5><p>Nelson Mazda Hickory Hollow</p> <p>Antioch, TN</p></h5>
<p>5300 Mount View Road</p>
<p>Antioch, TN 37013</p>
<p>877-708-4449</p>
<a href="http://www.nelsonmazdahh.com/nelson-difference/car-dealership-near.html" class="btn waves-effect waves-dark white black-text">Get Directions</a>
<p>
<a href="http://www.nelsonmazdahh.com/" class="btn waves-effect waves-dark white black-text">Visit Website</a>
</div>
<div class="col s12 l3">
<div class="divider"></div>
<h5><p>Nelson Mazda Cool Springs</p> <p>Franklin, TN</p></h5>
<p>7104 S Springs Drive</p>
<p>Franklin, TN 37067</p>
<p>877-708-4456</p>
<a href="http://www.nelsonmazdacs.com/nelson-difference/car-dealership-near.html" class="btn waves-effect waves-dark white black-text">Get Directions</a>
<p>
<a href="http://www.nelsonmazdacs.com/" class="btn waves-effect waves-dark white black-text">Visit Website</a>
</div>
</div>
CSS:
最佳答案
使用 CSS Flexbox 可以轻松居中。
这就是你所需要的:
.row {
display: flex;
flex-direction: column;
align-items: center;
}
更多 flexbox 居中选项:https://stackoverflow.com/a/33049198/3597276
关于html - 如何在父 div 中居中放置多个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35004676/
我是一名优秀的程序员,十分优秀!