精华内容
下载资源
问答
  • css文字水平居中
    千次阅读
    2019-03-18 16:39:19

    css技巧

    水平居中
    (1)**文字的水平居中
    语法:text-align:center;
    举例:
    <style type="text/css"> div{ width: 400px; height: 60px; line-height: 60px; text-align: center; /*实现文字水平居中*/ border: 1px solid red; } </style></head><body> <div> css实现文字居中: text-align:center; </div></body>

    更多相关内容
  • CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到
  • css水平居中文字垂直居中

    千次阅读 2021-08-04 06:14:33
    水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样:效果:可以看到这个div已经居中了但是我们里边的表格还没有居中,我们也可以给表格这样来一套,让他相对它的父级居中我们看到里边的表格也...

    水平居中

    定宽度+margin:top auto可以让一个块级别元素在外层居中

    例如这样:

    405241ce851edb4715f9db650547f880.png

    效果:

    a9a92c5a7715055b35cc012a1e01fec2.png

    可以看到这个div已经居中了

    但是我们里边的表格还没有居中,我们也可以给表格这样来一套,让他相对它的父级居中

    60aaedfbc64ef7b776c04e313864c5f3.png

    我们看到里边的表格也已经居中了,但是表格内容并没有居中,因为输入框的长度不等于表格的长度哇

    18b54467939136419c7064e4d89fc9ea.png

    想让内容居中很简单,直接加一个text-align:center让内容居中就好了

    dcd981e958d6e7a7b5471f1aa05b7507.png

    效果如下:

    55fb987e6b7759ceae25b18ac1933e54.png

    其实也可以这样在表格的宽度设置成和div一样宽,然后设置一个内容居中就好了

    b886f04f616be375398d74af298c79ed.png

    效果如下:因为宽度完全一样,所以表格的颜色被覆盖看不到了

    92b48352f726a3adc4f9f027ef81263b.png

    文字垂直居中

    使用line-height设置成高度和外面div一样即可.tabstyle {

    border-bottom: 1px solid #eee;

    padding: 0px 20px;

    /*固定高度好调整东西*/

    height: 38px;

    /*让文字垂直居中*/

    line-height: 38px;

    }

    f7f7a1365a0408bac781a46512e9179f.png

    登录后的logo文字垂直居中也是

    cdd00219b575bfe9f8e5dfcb255cc7fa.png

    设置一个line-height和外层div一样高自然就垂直居中了,很nice

    9505b51edaa4a3d5eb1688bf6990a77c.png

    欢迎加群讨论技术,群号:677373950

    展开全文
  • 文字旁边加上一个图标,通过css如何解决文字与图片不能水平居中对齐的问题,下面有个示例,大家可以参考下
  • 16种CSS水平垂直居中方法

    千次阅读 2022-03-22 16:44:20
    16种css水平垂直居中方法以及应用(文字、图片) 一、垂直居中 1、行内元素 基本思想:单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 ...

    16种css水平垂直居中方法以及应用(文字、图片)

    一、垂直居中
    1、行内元素

    基本思想:单行文本子元素line-height 值为父元素 height 值

    .parent {
        height: 200px;
    }
    
    .son {
        line-height: 200px;
    }
    
    2、块级元素
    2.1行内块级元素

    基本思想:元素是行内块级,使用display: inline-block, vertical-align: middle+伪元素处于容器中央

    兼容性:支持IE7

    .parent::after, .son{
        display:inline-block;
        vertical-align:middle;
    }
    .parent::after{
        content:'';
        height:100%;
    }
    
    2.2table布局

    兼容性:支持IE6/IE7,IE8无效

    .parent {
      display: table;
    }
    .son {
      display: table-cell;
      vertical-align: middle;
    }
    
    2.3flex弹性布局

    2009版写法

    兼容性:不支持IE

    .parent {
        display: box;
        box-orien: vertical;
        box-pack: center;
    }
    

    2012版写法

    兼容性:IE8/IE9不支持

    .parent{
      display:flex;
      justify-content:center;
    }
    .son{
      align-self:center;
    }
    
    2.4绝对定位+transform:translate(-50%,-50%)
    .parent{
      position:relative;
    }
    .son{
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
    
    二、水平居中
    1、行内元素

    基本思想:父元素设置text-align: center即可实现行内元素水平居中

    .parent {
        text-align: center;
    }
    
    2、块级元素
    2.1一般居中

    基本思想:该元素设置margin:0 auto

    .son {
        margin: 0 auto;
    }
    
    2.2子元素含float

    基本思想:子元素包含 float:left 属性, 让父元素宽度设置为fit-content,并且配合margin,fit-content是css3的新属性值

    .parent{
        width:fit-content;
        margin:0 auto;
    }
    
    .son {
        float: left;
    }
    
    2.3 flex弹性布局

    2009版本写法

    .parent{
        display:box;
        box-orient:horiaontal;
        box-pack:center;
    }
    

    2012版写法

    .parent{
        display:flex;
        justify-content:center;
    }
    
    2.4绝对定位
    • transform
    .son{
        position:absolute;
        left:50%;
        transform:translate(-50%,0);
    }
    
    • 负值margin-left
    .son{
        position:absolute;
        with:固定宽度
        left:50%;
        margin-left:-0.5*固定宽度;
    }
    
    • left:0;right:0;margin:0 auto
    .son{
        position:absolute;
        width:固定宽度;
        left:0;
        right:0;
        margin:0 auto;
    }
    
    三、具体应用–文字居中
    3.1css如何设置文字水平居中

    基本思想:css使用text-align规定水平对齐方式,影响一个元素的文本行相互的对齐方式。center值设置文本居中

    注意:text-align应用与容器,针对容器里面的文字以及容器里面的display:inline/inline-block,若是display:block无影响

    text-align具备向下传递的特点,设置一个div,div里面的也会居中

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 80px;
                background: rgb(228, 178, 187);
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 水平居中了--文本文字</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    3.2css如何设置文字垂直居中
    • 单行文本:基本思想是行高(line-height)和所在区域高度(height)设置一致
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 80px;
                background: rgb(228, 178, 187);
                line-height: 80px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 垂直居中--单行文本</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    • 多行文本

    (1)当父级元素高度不固定

    当父级元素不固定,会随着内容变化,高度只能通过文本的高度来撑开,所以需要使用内填充padding来使多行文本居中。只需要设置padding-top的值与padding-bottom的值相等

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                margin: 50px auto;
                background: rgb(228, 178, 187);
                padding-top: 50px;
                padding-bottom: 50px;
                padding-right: 20px;
                padding-left: 20px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 垂直居中--多行文本--父级高度不固定</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    (2)当父级元素高度固定

    vertical-align:middle +display:table-cell

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 100px;
                background: rgb(228, 178, 187);
                vertical-align: middle;
                display: table-cell;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 垂直居中--多行文本--父级高度固定</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    四、具体引用–图片居中
    4.1display:table

    基本思想:最外层div display: table+img父元素display: table-cell、vertical-align: middle

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                display: table;
            }
    
            #imgbox {
                display: table-cell;
                vertical-align: middle;
            }
    
            #imgbox img {
                width: 200px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div id="imgbox">
                <img src="1.jpg" alt="图片1">
            </div>
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    思考:如何在图片垂直居中基础上+水平居中

    基本思想:最外层div text-align: center(具有向下传递的特点)

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                display: table;
                text-align: center;/*增加的一行代码*/
            }
    
            #imgbox {
                display: table-cell;
                vertical-align: middle;
            }
    
            #imgbox img {
                width: 200px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div id="imgbox">
                <img src="1.jpg" alt="图片1">
            </div>
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    4.2flex实现

    基本思想:display: flex;align-items: center

    兼容性:不是最好的选择,IE8/IE9不支持

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .imgbox {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                display: flex;
                align-items: center;
            }
    
            .imgbox img {
                width: 150px;
                height: 100px;
                align-items: center;
            }
        </style>
    </head>
    
    <body>
        <div class="imgbox">
            <img src="1.jpg" alt="图片1">
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    4.3绝对定位

    基本思想:img父元素相对定位position: relative+子元素绝对定位position: absolute,img的top设置为50%,负值margin-top(这个是想实现垂直居中元素高度的一半),不确定高度用transform:translateY(-50%)

    兼容性:推荐写法,兼容性好

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .imgbox {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                position: relative;
                margin: 0 auto;
            }
    
            .imgbox img {
                width: 150px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
        </style>
    </head>
    
    <body>
        <div class="imgbox">
            <img src="1.jpg" alt="图片1">
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    展开全文
  • 前言 父元素 display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; height: 92rpx; line-height: 1; 图片: 文字

    前言

    父元素

    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 92rpx;
    line-height: 1;
    

    在这里插入图片描述
    图片:
    在这里插入图片描述
    文字:
    在这里插入图片描述

    展开全文
  • css水平居中对齐

    2021-03-23 15:27:24
    1 文字水平居中对齐及它的延伸写法 1.设置text-align 属性 例如: <h4 style="text-align: center;">测试标题1</h4> 具体解释: CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text...
  • 以及实现css文字水平居中的4种方法。现在使用css进行文字的水平和垂直居中,并不是一件容易的事情,有些新手在使用css方法去实现css居中,在浏览器并没有什么效果,可能是由于兼容的问题或者是一些非主流的浏览器。...
  • css中对于定宽的非浮动元素用margin:0 auto进行水平居中,对于不定宽的浮动元素也有一个常用技巧,这篇文章就给大家介绍下css如何让浮动元素水平居中,需要的朋友可以来学习下
  • 主要为大家详细介绍了css实现移动端图片文字水平居中的方法,如何实现图片以及文字的整体水平居中,本文为大家提供两种解决办法,感兴趣的小伙伴们可以参考一下
  • 不论是多行文字还是单行文字水平居中都可以设置text-align。 text-align 属性规定元素中的文本的水平对齐方式。 垂直方向居中如下 一、高度固定 单行文字 垂直居中,则设置line-height等于盒子的高度。 .box { ...
  • css样式能够实现水平居中,那么css水平居中怎么设置呢?本篇文章将给大家来分享关于css设置水平居中的实现方法。css中可以设置行内元素的水平居中和设置块级元素的水平居中,对于行内元素和块级元素不了解的同学可以...
  • 文章目录1.用行高实现文字的水平垂直居中2...再设置水平居中的对齐方式,就能实现水平居中。 接下来,就能实现水平垂直居中的效果了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
  • 1、文字水平居中CSS中想要让文字水平居中,可以使用text-align:center;。text-align是一个基本的属性,它会影响一个元素中的文本行互相间的对齐方式。值left、right和center会导致元素中的文本分别左对齐、右对齐...
  • 这种方法比较适合文字居中,其核心是设置行高(line-height)等于包裹他的盒子的高,或者不设高度只设行高,然后使用text-align:center;就能达到文字垂直剧中的效果 //html <div class="middle">555</...
  • 单行文字水平居中多行文字左对齐 开发中经常遇到文案显示有这样的需求:单行文字水平居中多行文字左对齐。其实这个效果实现很简单,两行css代码就可以搞定啦。 效果如下:使得p元素中的文案单行文字水平居中多行文字...
  • 单行文本的水平垂直居中常通过设置line-height实现, 而当我们需要使多行文字水平垂直居中时, 直接设置line-height不能够实现我们所需的效果.下面通过四种不同思路实现多行文字的水平垂直居中. 这里主要介绍思路, ...
  • 图片和文字自适应居中与CSS垂直水平居中图片居中:css代码:.banner{width:100%;position:relative;height:600px;overflow:hidden;}.banner img {height: 100%;width: auto;position: absolute;top: 0;left: 50%;...
  • CSS水平居中的四种方法

    千次阅读 2020-10-31 16:37:20
    水平垂直居中,特别是使用在... 水平居中,如果知道元素的宽度,则可以使用 .cell{width:300px; margin:0 auto; text-align:center;}如果是内联元素居中,那么直接用text-align:center则行 如果未知元素宽度,并且非内
  • css中经常会用到元素居中,那么今天我为大家分享几种水平居中的方法,下面代码都可以达到同样的居中效果,来不及解释了,快上马(码):一、margin : 0 auto;titlediv {width: 100px;height: 100px;background: pink;}...
  • 一、div中文字水平垂直居中 1、已知父元素 宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> body { ...
  • 水平居中 行内元素 行内元素想要水平居中,只需要给父元素添加text-align:center`即可。 <div class='container'> <span>example</span> </div> .container { text-align: center; } ...
  • 水平居中分为 行内元素的水平居中 和 块状元素的水平居中(块状元素又分为定宽块状元素和不定款块状元素)一、行内元素居中像文本图片等行内元素,居中是在其父元素中加 text-align:center; 来实现我要居中.a{ border:...
  • CSS水平居中

    2021-08-04 08:20:18
    一、使用CSS水平居中的三种情况 。1、行内元素(文本、图片等);2、定宽块状元素 ;3、不定宽块状元素(3种方法);二、具体解决方法。1、行内元素(文本、图片等):给父元素设置 text-align:center;2、定宽块状元素 :...
  • css实现图片和文字水平居中对齐

    千次阅读 2020-09-23 09:08:12
    一、通过vertical-align:middle... 1、实现img、p及div水平居中对齐,则只需要在img的css中的vertical-align:middle;及将p和div(display:inline-block)转化为行内元素; 实现img、span水平居中对齐...
  • 1.div中单行文字垂直水平居中。条件:外层div高度已经给定。代码如下: 复制代码代码如下: <style type=”text/css”> .div3{ border:1px solid red; text-align:center; height:200px; line-height:200px; ...
  • 4种方法实现css布局水平居中 方法一:margin + width <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title>css布局水平...
  • CSS实现文字垂直居中

    2022-04-01 18:22:43
    CSS实现文字垂直居中

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,923
精华内容 15,569
关键字:

css文字水平居中