行内块元素对齐方式
    行内块元素是指在一行内可以显示多个的块级元素，比如span、a、img等。这些元素默认是以水平方向排列的，并由它们自身的宽度来控制行内距离。但是当我们需要控制这些块级元素的水平和垂直方向的对齐时，我们需要使用块级元素对齐方式。本文将介绍几种行内块元素的对齐方式。
    1. 水平方向对齐
    （1）text-align属性
    text-align属性适用于父元素，可以控制文本和文本块的水平对齐方式。它可以设置为left、right、center、justify、start和end。
    left：左对齐；
    right：右对齐；text align center
    center：居中对齐；
    justify：两端对齐，将文本块的每一行拉伸至容器宽度；
    start：文本在容器的起始位置显示（与left对齐相同）；
    例如：
    div{
        text-align: center;
    }
    （2）float属性
    float属性可以使元素浮动到父元素的左侧或右侧。这种方式不会改变父元素中其他元素的布局方式，因为浮动元素不会占用其在文档流中原来的位置。
    vertical-align属性定义元素的垂直对齐方式。这个属性只对行内元素和表格单元格有效。
    它可以设置为top、middle、bottom、text-top、text-bottom。
    top：顶部对齐；
    middle：中间对齐；
    text-top：顶部与父元素的文本基线对齐；
    line-height属性用于控制元素的行内高度，通过设置行高来实现对齐。例如，当一个元素的line-height等于其height时，就可以实现元素内部的垂直居中效果。
    div{
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    我们可以使用display属性将元素设置为块级元素，再通过text-align属性来控制元素的水平对齐方式。
    （2）vertical-align和line-height属性
    span{
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        line-height: 100px;
        vertical-align: middle;
        text-align: center;
    }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。