如何使Instagram图像块居中

Posted 2023-03-05

【中文标题】如何使Instagram图像块居中

【英文标题】：How to center instagram image block

【发布时间】：2017-05-27 02:58:57

【问题描述】：

看看这个测试网站：https://dev.amberaviationacademy.com.au/testinstagram

我想将整个 Instagram 图像块居中。例如像这样：

基于此：How can I center a div within another div?，我需要做的是用于 instergram 块的set margin 0 auto 和set width: 90%。当我们不调整浏览器大小时，设置百分比很好。是否可以将其设置为自动居中，即使在浏览器调整大小时也是如此。

【参考方案1】：

您需要进行两处更改：将text-align: center 添加到.content 并将display: inline-block; 添加到a：

.block-instagram-block .content 
    display: inline-block;
    text-align: center; 


a 
    color: #222;
    text-decoration: none;
    display: inline-block;

【讨论】：

您能解释一下它是如何工作的吗？这是否意味着如果父元素设置为 text-align center，任何 inline-block 都会居中？

text-align: center; 使所有子项在父项中居中。子显示应设置为inline-block，以防止将每个子显示为block。因此，在父级中，我们将子级居中，inline-block 子级排成一行，填充父级的整个宽度。

工作正常吗？我试过了，但没有工作所有图像都只居中对齐！

@user7357089 您有权在 SO 中创建新问题并描述您的问题详情。