前端学习笔记65-文本的水平和垂直对齐

前端学习笔记65-文本的水平和垂直对齐

  • text-align
  • vertical-align
  • 图片基线

text-align

功能:文本的水平对齐
可选值:
 left:左侧对齐
 right:右侧对齐
 center:居中对齐
 两端对齐


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            width:500px;
            border:1px red solid;
            text-align:right;
        }            
    style>
head>
<body>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque dignissimos modi libero rerum odio. Pariatur ex ab rem tenetur laborum delectus optio quidem. Quae architecto veniam dolore debitis enim.div>

body>
html>

前端学习笔记65-文本的水平和垂直对齐_第1张图片

vertical-align

先看代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            width:500px;
            border:1px red solid;
            font-size: 50px;
        } 
        span{
            font-size:20px;
            border:1px blue solid
        }           
    style>
head>
<body>
    <div>今天天气abcd<span>真热abcdspan>div>

body>
html>

在这里插入图片描述

这里span的字体比较小。如果我想让span和它的父元素顶部对齐,咋办?
先了解基线,基线很简单,我们以前学英语的时候,用四线格写字母,从上往下数第三行就是基线。
用vertica-align。
可选值:
 baseline:默认值,基线对齐
 top:顶部对齐
 bottom:底部对齐
 middle:居中对齐

        span{
            font-size:20px;
            border:1px blue solid;
            vertical-align: bottom;
        }   

在这里插入图片描述
注意居中对齐指的是如果你的父元素里有个字母x,那么span的中线和父元素x中线对齐,感觉没啥用,了解了解就行。

此外还可以只写写多少px,指定span向上移动多少px。(下移的话就写负的)

        span{
            font-size:20px;
            border:1px blue solid;
            vertical-align: 20px;
        } 

前端学习笔记65-文本的水平和垂直对齐_第2张图片

图片基线

看代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>

        p{
            border: 1px red solid;
        }        
    style>
head>
<body>
    <p>
        <img src="./img/an.jpg" alt="">
    p>
body>
html>

前端学习笔记65-文本的水平和垂直对齐_第3张图片
看到了把,这里图片下方有点间隙,这就是图片的基线。有基线就会有这条间隙
这个实际上影响我们的布局,所以要处理下。
如何处理呢?只要修改它的垂直对齐,即不让它沿着基线对齐,就不会有缝了。

        p{
            border: 1px red solid;
        }  
        img{
            vertical-align: middle;
        } 

前端学习笔记65-文本的水平和垂直对齐_第4张图片
好了没有了。

你可能感兴趣的:(小白前端学习,html,css)