css基础 文字垂直居中 行高等于容器高度

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>

</head>
<body>
    <div style="height:100px;background-color:skyblue;">
        <p style="line-height:100px;">博客园</p>
    </div>
</body>
</html>

效果



CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8440589.html

时间: 2024-10-08 13:19:29

css基础 文字垂直居中 行高等于容器高度的相关文章

div css文字字体行高行距 深入理解css行间距设置

div css文字字体行高行距 深入理解css行间距设置 div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性.(体感音乐) 要使得每行的文字一定的间距距离所以可以通过line-height样式实现.接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距. 相关扩展CSS教程: css line-height div css字间距 为了观察到行距设置效果,新

css解决文字垂直居中

参考链接: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html   http://zhidao.baidu.com/question/69214815.html 对于文字的水平居中,text-align:center可以解决,垂直居中情况较复杂,分类讨论: 一.单行垂直居中 单行文本,如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可.如: d

css总结6:行高和字体大小的关系

1 CSS line-height 属性 代码: p.small {line-height:70%}p.big {line-height:200%} 运行后:70%与200%宽高 2 CSS font-size 属性 h1 {font-size:250%;}h2 {font-size:200%;}p {font-size:100%;} 两者特点: 1 一行文字行高和父元素高度一致的时候,垂直居中显示 2 行高:文字高度+上下边距 原文地址:https://www.cnblogs.com/auto

css基础 display:block 行内标签转为块级标签

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css实现文字垂直居中问题

一.问题描述 当高度固定或者不固定时,单行或者多行文本难以实现垂直居中: 二.产生原因 1.高度不固定,CSS 本身并没有提供相应的 API 支持(确切来说是提供不全): 2.浏览器不支持: 三.解决方法: 1.使用line-height属性,将line-height设置与元素高度等高. 优点:简单明了: 缺点:只适用于单行文本,局限性大 代码: .center-text-trick {height: 100px;line-height: 100px; white-space: nowrap;}

纯css控制文字2行显示多余部分隐藏

在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 3行代码搞定,这个很常见.但是要是2行文字显示多余隐藏呢,我之前在网上搜到的很多说什么用js去控制,用php控制...等等诸如此类的复杂方法,为什么不能同样用css去控制呢?后来找到答案了,用css同样可以去控制2行文字显示多余隐藏. text-overflow

CSS之特性,背景,行高,复合选择器,显示模式

css复合选择器 css 分为 基础选择器 和 复合选择器 , 但是基础选择器不能满足实际开发中 快速高效的选择标签 目的是为了选择更准确更精细的目标元素标签 复合选择器是由两个或者多个基础选择器 , 通过不同的方式组合而成 后代选择器 ( 重点 ) 父级 子级 { 属性名: 属性值; } div a { color: #ccc; } 当标签发生嵌套时 , 内层标签就成为外层标签的后代; 子孙后代都可以选择 , 或者说 , 它能包含任何包含在内的标签 . 子元素选择器 作用 : 子元素选择器只能

css 行高

line-height行高 行高也就是基线与基线的距离 一行文本垂直居中 行高的设置可以让一行文本在盒子中垂直居中 做法就是,让文字的行高等于盒子的高度 行高分为上距离,下距离和内容高度,上下距离平分除内容高度外距离 行高小于盒子高度,会偏上一点, 行高大于盒子高度,会偏下一点, 原文地址:https://www.cnblogs.com/wbyixx/p/9492737.html

0015 行高那些事:line-height

目标 理解 能说出 行高 和 高度 三种关系 能简单理解为什么行高等于高度单行文字会垂直居中 应用 使用行高实现单行文字垂直居中 能会测量行高 3.1 行高测量 行高的测量方法: 3.2 单行文本垂直居中 行高我们利用最多的一个地方是: 可以让单行文本在盒子中垂直居中对齐. 文字的行高等于盒子的高度. 这里情况些许复杂,开始学习,我们可以先从简单地方入手学会. 行高 = 上距离 + 内容高度 + 下距离 上距离和下距离总是相等的,因此文字看上去是垂直居中的. 行高和高度的三种关系 如果 行高 等