html - 有关CSS布局小问题

问题描述

问 题

直接上代码

.Pic figure {
    width: 340px;
    border: 1px solid #CBCBCB;
    text-align: center;
}

.Pic figcaption {
    margin: 5px;
    /*text-align: center;*/
}

.Pic img {
    margin: 10px;
}

很简单的小页面 这样的网页效果如下：

可见 good picture和图片都在整个border的正中间 然而这个text-align是我无意写上去的 后来发现想加figcaption的margin所以想把这个text-align加入到下面去 然而问题来了：

.Pic figure {
    width: 340px;
    border: 1px solid #CBCBCB;
    /*text-align: center;*/
}

.Pic figcaption {
    margin: 5px;
    text-align: center;
}

.Pic img {
    margin: 10px;
}

如果这样布局的话 网页效果如下：

不难看出 图片相对于border有了向左的偏移 我的问题是 为什么在figure里设定text-align也会对图片造成影响呐？ 可能我对text-align或者figture层次理解的不到位 大侠们求解答！

解决方案

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

img也是行内元素，所以text-align有效。摘自这里

这篇关于html - 有关CSS布局小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！