将 div 对齐到中心而不是右侧
Posted
技术标签:
【中文标题】将 div 对齐到中心而不是右侧【英文标题】:Aligning divs to center rather than right side 【发布时间】:2016-09-15 05:07:22 【问题描述】:我正在创建一个平铺界面,其中我将拥有一个基于响应式平铺的界面。
http://metroui.org.ua/tiles.html
我发现面临的一个问题是所有图块总是倾向于移动到 div 的左侧,并且无论我尝试什么都不会居中对齐。
在这里检查右边框 -
我尝试了多种有关定位和边距的方法,但无法得出任何结论。了解如何使所有图块居中对齐而不是左侧。
任何人都可以指导我吗?
谢谢
【问题讨论】:
【参考方案1】:考希克
不是 100% 确定您想要对齐的内容,但我会使用弹性框。
HTML
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
CSS
.flex-container
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
.flex-item
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
您也可以将上面的justify-content: center;
替换为:
justify-content: space-around;
或
justify-content: space-between;
【讨论】:
以上是关于将 div 对齐到中心而不是右侧的主要内容,如果未能解决你的问题,请参考以下文章