34、文本的水平和垂直对齐

最新推荐文章于 2022-08-11 10:46:04 发布

五仁卤鸡翅

最新推荐文章于 2022-08-11 10:46:04 发布

阅读量733

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106987582

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
文本的垂直和水平对齐
文本其它样式

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

文本的垂直和水平对齐

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
div{
    width:500px;
    border:1px red solid
    
   1、text-aligh 文本的水平对齐
          left 左侧对齐
          right 右对齐
          center 居中对齐
          justify 两端对齐
    
    text-aligh:center
}
span{
    font-size:20px;
    border:1px blue solid;
  
   2、vertical-align 设置元素垂直对齐的方式
          可选值：
             baseline 默认值 基线对齐(子元素和父元素基线对齐)
             top 顶部对齐，让子元素的顶部和父元素顶部对齐
             bottom 底部对齐
             middle 居中对齐
             具体数值 100px
          
    
    vertical-align :middle
}
p{
    border:1px red solid;
}
img{
 3、 不让图片基线对齐，防止图片和底边有缝隙（去除图片和底边有缝隙）
    vertical-align:bottom/top/middle
}

</style>
<body>
<div>
   今天天气<span>真不错</span>!
</div>

<p>
   <img src="..."/>
</p>
<div>
   今天天气不错 hello hello 
</div>

</body>
</html>

文本其它样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    font-size:50px;
 
   1、text-decoration 设置文本修饰
        可选值：
           none 什么都没有
           underline 下划线
           line-through 删除线
           overline 上划线
   
    text-decoration:underline red 
}
2、对溢出内容显示省略号
.box2{
    width:200px;
    white-space 设置网页如何处理空白
         可选值：
            normal 正常 
            nowrap 不换行
            pre 保留空白 保留文本格式
            
    white-space:nowrap; // 不换行
    overflow:hidden; // 超出裁剪
    text-overflow:ellipsis;// 省略号
}
</style>
<body>

<div class="box2">
   今天天气不错 hello hello 今天天气不错 hello hello 
   今天天气不错 hello hello 
</div>
<div class="box1"> 
   今天天气不错 hello hello 
</div>

</body>
</html>