14 文本的水平、垂直

    技术2022-07-12  72

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 700px; border: 2px red solid; /* text-align 文本的水平对齐 可选值:left right center justify 两端对齐 */ /* text-align: center; */ text-align: justify; /* text-align: left; */ /* text-align: right; */ } div.a{ font-size: 50px; } span{ font-size: 20px; border: 2px blue solid; /* 垂直对齐 vertical-align 可选值: baseline 默认值,基线对齐 top 顶部对齐 bottom 底部对齐 middle 居中对齐 ***px 直接指定值 */ /* vertical-align: baseline; */ /* vertical-align:top ; */ /* vertical-align: bottom; */ /* vertical-align: middle; */ vertical-align:-50px; } p{ border: tomato 2px solid; } .b img{ width: 400px; /* 没有设置vertical-align的默认为baseline(基线)对齐,所以图片的下面会有空隙 */ } .c img{ width: 500px; /* 设置了top的,就不会有空隙,只要不是baseline,其他几个值都可以 */ vertical-align: top; /* vertical-align: middle; */ /* vertical-align: bottom; */ } </style> </head> <body> <div> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae hic rerum necessitatibus ullam. Laboriosam nihil ab repellat odio corporis nostrum, hic quae accusamus saepe necessitatibus sed eos cum debitis! Tempora! </div><br> <div class="a"> 今天天气hellox<span> 真不错good</span> </div> <p class="b"><img src="../../图片/背景.jpg" alt=""></p> <p class="c"><img src="../../图片/背景.jpg" alt=""></p> </body> </html>
    Processed: 0.011, SQL: 9