div内部文字居中方案

crayon-shin-chan

于 2020-09-21 21:22:31 发布

阅读量1k

点赞数 1

分类专栏： # html # css surprise 文章标签： css 定位 html css3 html5

本文链接：https://blog.csdn.net/qq_27868061/article/details/108716745

版权

surprise 同时被 3 个专栏收录

932 篇文章 41 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

css

24 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

本文介绍了三种在CSS中实现div内部文字垂直居中的方法：1) 使用line-height，通过设置与div高度相等使文字居中，但不适合多行文字；2) 利用padding调试调整，使文字在div内居中；3) 将div设为display:table，子元素设为display:table-cell并添加vertical-align:middle。

摘要由CSDN通过智能技术生成

1.line-height

ine-height 属性设置行间的距离（行高）。

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>line-height居中测试</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container{
            width: 200px;
            height: 100px;
            margin: 0 auto;
            border: 1px solid black;
            backgr