span文字水平居中_居中技巧

最新推荐文章于 2023-12-09 14:54:44 发布
最新推荐文章于 2023-12-09 14:54:44 发布
阅读量8.3k 收藏 1
点赞数 1
文章标签： span文字水平居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31313019/article/details/113318267
版权

c782ae25a2dcde4a08e57bae1c9fc12c.png

    居中分为垂直居中和水平居中。

水平居中

    水平居中分为文字居中和元素居中。元素又分为块元素和行内元素以及复合行内元素。 

文字水平居中

    文字水平居中可以直接用text-align:center; 

块元素水平居中

    块元素需要先给一个width，之后将margin的左右设置为auto就行了

举例：  

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>块元素水平居中title>

        <style type="text/css">

            .wrapper{

                width: 200px;

                height: 100px;

                border: 1px solid black;

                margin: 0 auto;

                background-color: burlywood;

            }

        style>

    head>

    <body>

        <div class="wrapper">div>

    body>

html>

1221d5a2288a0db3e2362a161a9a2fb6.png

行内元素和复合行内元素水平居中

    复合行内元素即是行内块元素、inline-table、inline-flex等。

    行内元素和复合行内元素可以直接用text-align:center;实现水平居中，与文字居中相似。 

垂直居中

    垂直居中分为文字垂直居中和元素垂直居中。

    文字分为单行文字和多行文字

    元素分为块元素和行内块元素   

单行文字垂直居中

    需要把height与line-height相等就能实现 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>单行文字垂直居中title>

        <style type="text/css">

            .wrapper{

                height: 100px;

                width: 200px;

                line-height: 100px;

                border: 1px solid black;

            }

        style>

    head>

    <body>

        <div class="wrapper">我真的是太帅了div>

    body>

html>

0d82608c8feea30a7170fc939da4d76f.png 

多行文字垂直居中

     实现：用标签把所有文字包含，定义span为inline-block元素，之后使用inline-块元素垂直居中的方式，可以先看下面inline-block元素垂直居中方式。

举例：     

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>多行文字垂直居中title>

        <style type="text/css">

            .wrapper{

                display: table-cell;

                vertical-align: middle;

                width: 200px;

                height: 150px;

                border: 1px solid black;

            }

            span{display: inline-block;}

        style>

    head>

    <body>

        <div class="wrapper">

            <span>刘德华<br />

                张学友<br />

                郭富城<br />

                黎明

            span>

        div>

    body>

html>

0268336d1fa6f84027eb0907c9faf883.png

块元素垂直居中

    对于高度已知的块元素，可以使用position实现。

    方法是：

父元素{

    position: relative;

}

子元素{

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: "height值一半的负值";

    margin-left: "width值一半的负值";

}

举例：

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>块元素垂直居中title>

        <style type="text/css">

            .father{

                position: relative;

                width: 200px;

                height: 150px;

                border: 1px solid black;

            }

            .son{

                position: absolute;

                top: 50%;

                left: 50%;

                background-color: blue;

                width: 50px;

                height: 50px;

                margin-top: -25px;

                margin-left: -25px;

            }

        style>

    head>

    <body>

        <div class="father">

            <div class="son">div>

        div>

    body>

html>

6c3416236496e1c2153eeee0b6cec79e.png

    如果单独需要水平居中，将top和margin-top属性去掉。单独需要垂直居中将left和margin-left属性去掉。  

行内块元素垂直居中

    方法： 

父元素{

    display: table-cell;

    vertical-align: middle;

}

子元素{

    vertical-align: middle;

}

举例：

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>行内块元素垂直居中title>

        <style type="text/css">

            .wrapper{

                display: table-cell;

                vertical-align: middle;

                width: 200px;

                height: 150px;

                border: 1px solid black;

            }

            img{

                vertical-align: middle;

            }

        style>

    head>

    <body>

        <div class="wrapper">

            <img src="C:\Users\雨殇\Desktop\lion.png" alt=""/>

        div>

    body>

html>

06e289a4aa5dc56759971493d7c54d79.png

本节主要学习了居中技巧，最后对其总结。       

  • 总体分为水平居中和垂直居中

  • 文字水平居中

  • 块元素水平居中

  • 行内元素和复合行内元素水平居中

  • 单行文字垂直居中

  • 多行文字垂直居中

  • 块元素垂直居中

  • 行内块垂直居中

花小烙
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css居中怎么做
zzo12345的博客
11-07 747
文章目录 一、行内元素的水平居中 二、块级元素的水平居中 三、行内元素的垂直居中 四、块级元素的垂直居中 五、块级元素的水平垂直居中 一、行内元素的水平居中 处于块级元素包裹中的行内元素，其水平居中可在其父元素中使用text-align:center，代码如下： #block-inline { text-align: center; } <div id="block-inline"> <span>我是s.
CSS span标签中文字水平垂直对齐
weixin_51747462的博客
10-21 5385
CSS span标签中文字水平垂直对齐
span标签居中显示的正确方法
weixin_44195615的博客
05-23 5158
style="text-align: center;display:block;"
html span 字体位置,span内文字居中css布局方法_让span内容居中
weixin_31225753的博客
06-04 1万+
span内文字居中条件与实现CSS布局方法span默认不像div是块元素，对span使用文字居中text-align:center样式，文字内容是无法在span居中的。最直观对span设置宽度无效的。了解《span宽度设置》以下解决方法，为了能看见居中效果，所以对span设置宽度和边框。内容居中CSS代码：text-align:center解决一：span设置float设置浮动，再设置text-a...
span标签水平居中
weixin_39190732的博客
03-12 1万+
span设置display:block，让span形成块独占一行 显示内容 必须加display:block，否则不能居中
css实现移动端图片文字水平居中
09-24
在移动端网页设计中，经常需要将图片和文字组合在一起，并且要求它们整体水平居中，以达到美观和用户体验的效果。本文将介绍两种CSS方法来实现这个目标。 首先，我们来看第一种解决方案，它利用了行内元素的`...
大小不固定的图片、多行文字的水平垂直居中实现方法
09-25
在CSS布局中，水平垂直居中是一个常见的需求，但针对大小不固定的图片和多行文字，实现起来就更具挑战性。本文将详细介绍两种方法来解决这个问题。 首先，我们来看多行文字的垂直居中。对于单行文字，通过设置`line...
DIV和SPAN垂直居中对齐的实现方法
09-25
DIV和SPAN如何垂直居中对齐，水平居中很简单，设置text-align:center就可以了，垂直居中一直很是疑惑，下面为大家解惑
浅谈css处理水平居中的问题
09-24
对于行内元素，如`<span>`或`<a>`，可以通过设置其父元素的`text-align`属性为`center`来实现水平居中。这将使所有子元素在父元素的水平中心对齐。例如： ```css .parent { text-align: center; } ``` 2. **...
关于div中img,span垂直居中的问题
09-28
下面小编就为大家带来一篇关于div中img,span垂直居中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
水平居中元素
m0_65912225的博客
07-20 253
行内元素不能直接设置text-align:center,但如果一个行内元素设置position:absolute,就可以像块级元素一样设置居中margin:0 auto;给父元素添加text-align:center,其他不需要居中的元素设置text-align:left。ext-align:center不能直接用在行内元素span上,而是要在行内元素的父元素上添加。设置绝对定位,left:50%,margin-left:(已知宽度一半)span:行内元素 h1:块级元素 p:块级元素。
三种让DIV标签中的P标签水平和垂直都居中方法
YuKing_HONG的博客
03-06 1万+
给其父元素添加text-align:center使其水平居中，这个只是对行内元素和行内块元素有效。而P元素是块级元素，所以不能使用上面的方法。再给他父元素two加 position: relative;然后开始计算上面距离的数值和左边距离的数值，这里分别是。行内元素和行内块元素水平居中，给其父元素添加text-align:center；所以案例里面给one加了 text-align: center之后span就会水平居中了。红色1块是span，属于行内元素。绿色2块是p，属于块级元素。
span内文字居中css布局方法_让span内容居中
热门推荐
xueyue616的博客
06-06 4万+
span内文字居中条件与实现CSS布局方法span默认不像div是块元素，对span使用文字居中text-align:center样式，文字内容是无法在span居中的。最直观对span设置宽度无效的。了解《span宽度设置》以下解决方法，为了能看见居中效果，所以对span设置宽度和边框。内容居中CSS代码：text-align:center解决一：span设置float设置浮动，再设置text-a...
CSS中实现元素水平居中、垂直居中的6个方法（详解）
xtcbql的博客
09-30 2万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
如何让span中的文字水平居中
weixin_30527551的博客
07-12 1685
https://zhidao.baidu.com/question/428458343905861732.html 转载于:https://www.cnblogs.com/lizhenlzlz/p/7155975.html
span标签垂直居中显示的正确方法
gys9895的博客
05-31 4521
必须加上display:block;否则不能居中显示，因为span是行内元素。line-height：值为span的高度。必须转换成块元素才会居中显示生效。
行内元素和块状元素的水平居中设置
xiamocsdn的博客
05-06 1240
我在上一篇文章里总结了一下块状元素、内联元素、内联-块状元素的区别 三者的一个重要区别在于是不是独占一行以及能不能设置宽高、内外间距。 在这个前提下，我们应该怎么设置元素在水平方向上的居中呢？ 行内元素的水平居中设置 行内元素的水平居中有一个通用的方法：通过在其父元素中设置text-align:center来实现： 我们给出一个html文件，写入一个div块状元素，包裹一个span内联元素： &l...
p标签的水平居中和垂直居中
最新发布
fury的博客
12-09 2108
给其父元素添加text-align:center使其水平居中，这个只是对行内元素和行内块元素有效。行内元素和行内块元素水平居中，给其父元素添加text-align:center；所以案例里面给one加了 text-align: center之后span就会水平居中了。的时候，会发现p元素的外边距和它的父元素外边距重合，看着是外边距塌陷问题。给父元素或者子元素设置text-align:center,display:flex,子元素设置:position:absolute。4.块级元素P元素水平居中垂直居中。
web前端字体居中_css如何让文字水平居中显示？
05-24
可以使用 CSS 的 `text-align` 属性来实现文字水平居中显示，例如： ```css div { text-align: center; } ``` 上述代码将使 `div` 元素中的文本内容水平居中显示。如果要让某个特定元素内的文本水平居中，也可以直接在该元素上使用 `text-align: center;`。 需要注意的是，这个属性只对块级元素（如 `div`）和一些内联块元素（如 `button`）有效，对于一般的内联元素（如 `span`）可能需要将其转换为内联块元素才能生效。可以使用 CSS 的 `display` 属性来实现： ```css span { display: inline-block; text-align: center; } ``` 上述代码将使 `span` 元素转换为内联块元素，从而使 `text-align` 属性生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值