将块与html div和样式对齐

我对前台很陌生，在Wordpress网站的页脚居中放置块时遇到了一些麻烦。

这是我的代码：

<div align="center style="display:flex;justify-content:center;flex-direction:column;">

不幸的是，块仍然停留在页脚的左侧。

只需将显示器设置为柔性，并设置对齐项目(用于垂直对齐(和将项目居中对齐(用于水平对齐(

.center {
display: flex;
align-items: center;
justify-content: center;
}

<div class="center">
hi </div>

默认情况下，div元素是块元素。由于您的问题不清楚您是想将div还是内容居中，我将给出两种可能性。

将内联元素居中放置在块容器中
块容器内的中心块元素

.footer {  
background: #999;
padding: 20px;    
}
.center {
text-align: center;
}
.flexi {
display: flex;
align-items: center;
justify-content: center;
}
.footerBlock {
background:green; 
width: 50%;
padding: 20px;
}

<h2>Center Inline within Block</h2>
<div class="footer center">
<div>
FOOTER Inline
</div>
</div>
<hr/>
<h2>Center Block within Block</h2>
<div class=" flexi">
<div class="footerBlock" >
Footer Block
</div
</div>

正如您所看到的，这取决于您的应用程序。如果您只想插入版权行，那么align元素就足够了。如果你想有一个更复杂的页脚，其中有一个容器，并且在这个容器中应该有其他容器，然后相邻。您可以使用CSS Flex或CSS网格系统来实现这一点。我希望它能有所帮助。

您的块向左，因为您必须将flex项目水平放置在与文本相同的方向上

<div style="display:flex;flex-direction:row;justify-content:center;">

您可以使用网格系统

<div class="row">
<div class="col-md-6 offset-md-3">Column-Center</div>
</div>

相关内容

最新更新

热门标签：