HTML/CSS布局技巧(一)

      我们在进行页面布局时总会遇到各种各样的问题，比如：水平居中，垂直居中，图片和同行文字要看起来对称，还要考虑基线问题等。为了方便大家对页面布局有更好的了解，我将一部分布局小技巧整理出来，之后在设置页面遇到布局问题会继续归纳分享的哦！

                                             

1. 行内元素、行内块元素居中：水平居中使用   text-align: center;  垂直居中将  父元素的行高和父元素高度设置为一样的。

2.想要实现下图居中问题需注意：文字和图片分别都居中且文字处于在图片中间，这时我们会用到 vertical-align: middle; 属性，这个属性主要是设置基线对齐方式，

                                              

CSS代码

 .text{
        width: 300px;
        height: 300px;
        background-color: yellow;
        text-align: center;
        line-height: 300px;
        /*font-size: 140px;*/
    }
    span{
        /* font-size: 140px; */
    }
    img{
        vertical-align: middle;
    }

HTML代码

   <div class="text">
        <span>x</span> 
        <img src="./img/1.png">
    </div>

此时效果图为：

                                          

看起来居中，一切成功。但是如果将span的字体大小增大就会出现

                                                 

为了解决这一问题我们可以在其父元素中添加相等的字体大小属性,即  font-size: 140px;

 结果：

                                              

3.元素之间的空白问题：

如：

想要他们消除之间的空格：1.去掉换行和空格（并不推荐）2.给父元素设置font-size:0;之后将再给某些字体单独设置字体大小 。

结果：

4. 图片下面存在的空白

                                                 

图片默认情况下是基线对齐的，因此我们只要更改他的对齐方式即可，或者我们将它改为块元素。

总结解决方案：

       1.display: block; 将图片改成块元素

       2.给img添加对齐方式： vertical-align: bottom; 

结果：