精华内容
下载资源
问答
  • css水平居中
    2021-06-16 04:52:08

    css样式能够实现水平居中,那么css水平居中怎么设置呢?本篇文章将给大家来分享关于css设置水平居中的实现方法。

    css中可以设置行内元素的水平居中和设置块级元素的水平居中,对于行内元素和块级元素不了解的同学可以参考一下css块级元素的定义是什么?css块级元素有哪些?和css行内元素有哪些?css块级元素和行内元素的区别这两篇文章,那我们下面就直接来看css这两种水平居中的设置方法。

    首先我们来看一下css设置行内元素水平居中。

    第一种:css行内元素水平居中:

    语法:div{text-align:center} /*DIV内的行内元素均会水平居中*/

    简单解释:为父元素设置中text-align:center样式。

    行内元素水平居中

    详细解释:

    1、文字在这里 让“文字”这两个字相对于label水平居中是毫无意义的,label是行内元素,他的宽度等于内容的宽度,也就是说“文字”这两个字,永远是水平居中的。

    2、

    文字

    此时,让“文字”这两个字水平居中便有了意义,因为p是块级元素,他的宽度独占一行,而文字只占两个字符宽度,此时给p元素设置text-align:center;那么“文字”这两个字便在一行内水平居中了。

    3、

    文字
    ,此时该如何让label元素相对于div水平居中。

    看完了css行内元素水平居中,我们接下来说一说css块级元素的水平居中,css块级元素水平居中又分为定宽块级元素水平居中和不定宽块级元素水平居中,下面我们分别来看一下。

    第二种:css定宽块级元素水平居中:既是块级元素又是固定宽度的元素。

    给需要水平居中的块级元素本身左右margin值设置为auto;

    例如:

    css不定宽块级元素水平居中:宽度不固定的块级元素

    例如:

    1、将块级元素加入

    设置table实现水平居中

    2、设置块级元素样式display:inline,然后再为父元素添加text-align:center样式 。

    设置inline实现水平居中

    3、在块级元素外加一层父元素,并设置父元素样式为style="float:left;position:relative;left:50%";设置块级元素样式为style="float:left;position:relative;left:-50%"

    设置relative实现水平居中

    相关推荐:

    更多相关内容
  • CSS水平居中

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

    一、使用CSS水平居中的三种情况 。

    1、行内元素(文本、图片等);

    2、定宽块状元素 ;

    3、不定宽块状元素(3种方法);

    二、具体解决方法。

    1、行内元素(文本、图片等):

    给父元素设置 text-align:center;

    2、定宽块状元素 :

    div{

    border:1px solid blue;

    width:350px;

    height:20px;

    margin:20px auto; /*水平居中:上下方向有20px的margin值,左右方向的等margin值由浏览器自动设置*/

    }

    这是个定宽块状元素,居中显示

    3、不定宽块状元素(3种方法):

    (1)为需要水平居中的元素加table标签;然后为table设置样式: table{margin:0 auto;}

    (2)将块级元素转换为内联元素(eg:div{display:inline;});然后使用text-align:center;来实现居中

    .container{text-align:center;}

    .container ul{

    list-style:none;

    margin:0;

    padding:0;

    display:inline;

    }

    .container li{

    margin-right:8px;

    display:inline;

    }

    • 1
    • 2
    • 3

    (3)给父元素设置float:left; position:relative; left:50%;

    子元素设置position:relative; left:-50%  来实现水平居中

    .container{

    float:left;

    position:relative;

    left:50%;

    }

    .container ul{

    list-style:none;

    margin:0;

    padding:0;

    position:relative;

    left:-50%;

    }

    .container li{

    display:inline;

    float:left; /*有无都可*/

    }

    • 1
    • 2
    • 3

    css水平居中那点事

    昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...

    css水平居中,竖直居中技巧(二)

    css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html

    css水平居中的各种方法

    说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢?  请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素 ...

    CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

    CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

    CSS 水平居中

    一.水平居中:行内元素解决方案 居中元素:文字.链接以及其它行内元素(inline或inline-*类型的元素,如inline-block,inline-table,inline-flex)解决方案: ...

    CSS 水平居中/布局 垂直居中 (月经问题)

    水平居中 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现.

    & ...

    随机推荐

    总结Cnblogs支持的常用Markdown语法

    一.什么是Markdown Markdown是一种可以使用普通文本编辑器编写的标记语言, Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人用它写博客.世界上最流行的博客平台 ...

    remove ---会报错discard不会报错

    s = {1,2,3,4,5,6,'sn','7'} s.remove('hellfjsdjfsjdfljsdl')#删除元素不纯在会报错 print(s) s.discard("sbbbb ...

    调整 FMX Android 文字显示「锯齿」效果

    说明:调整 Firemonkey Android 显示文字有「锯齿」效果 适用:Firemonkey Android 平台 修改方法: 请将源码 FMX.FontGlyphs.Android.pas  ...

    [算法导论]迪克斯特拉算法 @ Python

    class Graph: def __init__(self): self.V = [] self.w = {} class Vertex: def __init__(self, x): self.k ...

    html4.0.1,h5,xhml,文档声明区别

    声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 提示:请始终向 HTML 文档添加 gt ...

    关于微软RDLC报表打印时文字拉伸问题(Windows server 2003 sp2)

    最近我们开发的打印服务频频出现打印文字拉伸问题,客户意见络绎不绝,最为明显的是使用黑体加粗后 “2.0份” 打印出来后小数点几乎看不见了,用户很容易误认为 “ 20份” .所以问题达到了不得不停下手上 ...

    DataGridView插入一行数据和用DataTable绑定数据2种方式

    以前不会用DataGridView的时候一直使用DataTable绑定的方式,如下: DataTable table = new DataTable(); //给表添加一列Name,此名字和 tabl ...

    The 3n + 1 problem

    The 3n + 1 problem Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) ...

    Maven干货

    好处: 1. 依赖管理:对jar包统一管理 2. 项目构建: 项目编码完成后,对项目进行编译.测试.打包.部署.之前项目构建通过eclipse工具实现.今天学习新的工具也可以实现这些过程.比如:通过m ...

    网站加速与Linux服务器防护

    网站加速方面 1. Nginx 配置 gzip 压缩 开启nginx gzip压缩后,网页.css.js等静态资源的大小会大大的减少,从而可以节约大量的带宽,提高传输效率,给用户快的体验.虽然会消耗c ...

    展开全文
  • 宽度自适应:就是元素的宽度根居里面的内容来变化
  • 下面小编就为大家带来一篇CSS水平居中总结(新手必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS水平居中方法

    千次阅读 2020-11-09 16:04:06
    水平居中 行内元素 首先看父元素是不是块级元素,如果是 要实现水平居中,则直接给父元素设置 text-align:center; <style> .father{ text-align: center; } </style> <body> <div class=...

    水平居中

    • 行内元素
      首先看父元素是不是块级元素,如果是
      要实现水平居中,则直接给父元素设置 text-align:center;
    <style>
        .father{
            text-align: center;
        }
    </style>
    <body>
        <div class="father">
            <span class="son">行内元素</span>
        </div>
    </body>
    

    效果:
    在这里插入图片描述
    附:此时我们发现父元素的大小完全由行内元素撑开。

    父元素不是块级元素
    将父元素设置为块级元素,再给父元素设置text-align:center;

    • 块级元素
      两种方案:
      方案一、
      分为宽度定不定两种情况
      1.定宽度:需要谁居中,给其设置marigin:0 auto;
    .sun{
            width: 100px;
            height: 100px;
            background-color: red;
            margin:0px auto;
        }
    </style>
    <body>
        <div class="sun"></div>
    </body>
    

    效果:在这里插入图片描述
    2.不定宽度:默认子元素的宽度和父元素一样,这时需要设置子元素为:display:inline-block或display:inline;即将其转换成行内块级/行内元素。给父元素设置text-align:center;

    .father{
            text-align: center;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .sun{
           
           background: green;
           display: inline;
        }
    </style>
    <body>
        <div class="father">
            <div class="sun">我是块级元素</div>
        </div>
    

    效果:
    在这里插入图片描述
    方案二、
    使用定位属性
    父元素为相对定位/绝对定位,在设置子元素为绝对定位。设置子元素的left:50%;
    1.定宽度:设置绝对子元素的margin-left:-width/2;或者设置transforn:translateX(-50%);

    <style>
        .father{
            position: relative;
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-left: 100px;
        }
        .son{
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            left: 50%;
            margin-left: -25px;
        }
    
    </style>
    <body>
        <div class="father">
            <div class="son">
    
            </div>
        </div>
    </body>
    

    效果:元素可以看出元素son是相对于father元素的水平居中。

    2.不定宽

    <style>
        .father{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin-left: 100px;
        }
        .son{
            position: absolute;
            /* width: 50px; */
            height: 50px;
            background-color: red;
            left:50%;
            transform:translateX(-50%) ;
        }
    
    </style>
    <body>
        <div class="father">
            <div class="son">
                我是块级元素
            </div>
        </div>
    

    效果:在这里插入图片描述
    子元素是相对定位的情况下
    可以使用margin:0px auto;实现水平居中。

     .father{
            position: relative;
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin-left: 100px;
        }
        .son{
            position: relative;
            width: 50px;
            height: 50px;
            background-color: red;
            margin: 0px auto;
        }
    
    </style>
    <body>
        <div class="father">
            <div class="son">
                我是块级元素
            </div>
        </div>
    </body>
    

    效果
    在这里插入图片描述
    方案三、使用flex布局实现(宽度定不定都可以)
    使用flexbox布局,只需要给待处理的块状元素的父元素添加属性display:flex;
    justify-content:center;

    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: aqua;
            display: flex;
            justify-content: center;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    
    </style>
    <body>
        <div class="father">
            <div class="son">
                我是块级元素
            </div>
        </div>
    </body>
    

    效果
    在这里插入图片描述

    展开全文
  • CSS水平居中的四种方法

    千次阅读 2020-10-31 16:37:20
    水平垂直居中,特别是使用在... 水平居中,如果知道元素的宽度,则可以使用 .cell{width:300px; margin:0 auto; text-align:center;}如果是内联元素居中,那么直接用text-align:center则行 如果未知元素宽度,并且非内

    水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell,mg12的博客那个相关文章的列表好像就是使用这个代码来的,之前我也是参考他来的。
    今天重新整理一下,并结合前人的辛劳,总结一下以作备份。 水平居中,如果知道元素的宽度,则可以使用 .cell{width:300px; margin:0 auto; text-align:center;}如果是内联元素居中,那么直接用text-align:center则行 如果未知元素宽度,并且非内联元素,那么下面给出的几种方案也适合你。

    第一种:相对定位法

    原理是父类浮动的同时向左left:50%,而子类则向左浮动的同时left:50%;

    <style type="text/css">.centerlist {position:relative;left:50%;float:left;}.centerlist li {position:relative;right:50%; z-index:2;float:left}</style><ul class="centerlist"> <li><a href="#">Lorem ipsum dolor.</a></li> <li><a href="#">Lorem ipsum dolor.</a></li> <li><a href="#">Lorem ipsum dolor.</a></li> <li><a href="#">Lorem ipsum dolor.</a></li> <li><a href="#">Lorem ipsum dolor.</a></li> <li><a href="#">Lorem ipsum dolor.</a></li> <li><a href="#">Lorem ipsum dolor.</a></li> <li><a href="#">Lorem ipsum dolor.</a></li> <li><a href="#">Lorem ipsum dolor.</a></li></ul>

    第二种:强制内联

    <style type="text/css">.centerlist_inline{text-align: center;}.centerlist_inline li{display: inline;}</style><ul class="centerlist_inline"><li><a href="">lorem1</a></li><li><a href="">lorem1</a></li><li><a href="">lorem1</a></li><li><a href="">lorem1</a></li></ul>

    局限:块级元素改为内联元素,那么高度、宽度、margin-top,margin-bottom, padding-top,padding-bottom,等都不能用。

    第三种: 使用inline-block

    如果大家看过我之前写的inline-block替换float可能就会清楚这个属性的好处了。

    <style type="text/css">.centerlist_inline-block{text-align: center; font-size:0; -letter-spacing:-1px;}.centerlist_inline-block li{display: inline-block; \*display: inline; \*zoom:1; font-size:12px; letter-spacing:normal; word-spacing:normal;}</style><ul><li><a href="">lorem1</a></li><li><a href="">lorem1</a></li><li><a href="">lorem1</a></li><li><a href="">lorem1</a></li></ul>

    第四种:table-cell

    <style type="text/css">.centerlist_table-cell{display:table; margin:0 auto;}.centerlist_table-cell{display:table-cell;}</style><ul class="centerlist_table-cell"><li><a href="">lorem1</a></li><li><a href="">lorem1</a></li><li><a href="">lorem1</a></li><li><a href="">lorem1</a></li></ul>

    缺点是不兼容ie6,ie7 推荐使用inline-block这种水平居中的方法,既保留了块级元素特性,而且完美兼容。就是代码有点多。

    另外你还可以使用表格的方式来水平居中。 说完了水平居中,下面说垂直居中。如果元素是内联元素,并且只有一行,则我们可以通过line-height来设置与其高度同样大小,则实现了垂直居中了。

    最后

    关注公众号:前端开发博客,并回复:1024, 领取前端进阶资料包

    展开全文
  • 下面小编就为大家带来一篇css水平居中的各种方法总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 下面小编就为大家带来一篇关于css水平居中的小小探讨。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 前言设计是带有主观色彩的,同样网页设计中的 css 一样让人摸不头脑。网上列举的实现方式一大把,或许在这里你都看到过,但既然来到这里我希望这篇能让你看有所收获,毕竟这也是前端面试的基础。实现方式1、text-...
  • 一个 CSS 布局和样式的问题,如何在水平居中和限制最大宽度中,进行平衡
  • CSS水平居中+垂直居中+水平/垂直居中的方法总结

    万次阅读 多人点赞 2018-09-02 19:28:12
    水平居中  行内元素  块级元素 方案一:(分宽度定不定两种情况) 方案二:使用定位属性 方案三:使用flexbox布局实现(宽度定不定都可以) 垂直居中 单行的行内元素 多行的行内元素  块级元素 水平垂直...
  • css水平居中最佳写法

    2017-08-15 20:17:33
    ul { position:absolute; left:50%; } li { position:relative; right:50%; } 此方法实现水平居中,兼容性强、扩展性强。
  • 主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • css水平居中,文字垂直居中

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

    千次阅读 2022-03-22 16:44:20
    16种css水平垂直居中方法以及应用(文字、图片) 一、垂直居中 1、行内元素 基本思想:单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 ...
  • 主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法,有兴趣的可以了解一下。
  • CSS居中——水平居中(子元素有无宽度)、垂直居中(子元素有无高度)
  • 水平居中 行内元素 行内元素想要水平居中,只需要给父元素添加text-align:center`即可。 <div class='container'> <span>example</span> </div> .container { text-align: center; } ...
  • css图片居中(水平居中和垂直居中)

    千次阅读 2021-02-27 17:47:42
    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍。 css图片水平居中 利用margin: 0 auto实现图片水平居中 ...
  • CSS 将button按钮垂直+水平居中 参考文章:CSS实现垂直居中的5种方法 具体效果如图: 这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度...
  • css水平垂直居中的快速方法
  • CSS实现: 水平居中 的几种方法

    千次阅读 2022-06-28 22:02:14
    margin值auto、position(子绝父相)+偏移值left+margin-left、position+偏移left+CSS2d transform、text-align:center;...不能实现水平居中:left:50%;与transform:translateX(-50%);中的50%意义不同
  • css水平居中对齐

    2021-03-23 15:27:24
    1 文字水平居中对齐及它的延伸写法 1.设置text-align 属性 例如: <h4 style="text-align: center;">测试标题1</h4> 具体解释: CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text...
  • 方法有不少,设计蜂巢就为大家介绍几种CSS水平和垂直居中的方法。一、水平居中1.1 文本水平居中文本水平居中div{text-align:center;}1.2 元素水平居中设置 margin:0 auto;,即可让元素居中元素水平居中div{margin:0 ...
  • CSS 水平居中

    2013-05-20 22:42:29
    一、水平居中: ①:文本、文本等行内元素的水平居中:给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中: .test { text-align: center;} I am test! ②:确定宽度的块级元素的水平居中...
  • -- 优点:居中元素不会对其他的产生影响, 弱点:transform属于css3内容,存在兼容性问题,高版本浏览器需要添加前缀 --&gt;   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;hea...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,307
精华内容 32,122
关键字:

css水平居中

友情链接: Material_Theme-3.9.4.zip