文本在DIV中垂直居中显示

最新推荐文章于 2023-03-18 13:37:05 发布
最新推荐文章于 2023-03-18 13:37:05 发布
阅读量207 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lachesis_/article/details/112680620
版权

1 图片

为了看清楚结构，加了黑色边框
在这里插入图片描述

2 代码

*{
    background-attachment: fixed;
}
img{
    float: left;
    width:30px;
    height: 30px;
    overflow: hidden;
    padding:10px;
    border:1px solid #000;
}
.all-wraper{
    display: inline-block;
    background-color: #fff;
    border:1px solid #000;
}
.div1,.div2,.div3,.div4{
    float: left;
    height: 50px;
    margin: 10px;
    border:1px solid #000;
}
.textdiv1,.textdiv2,.textdiv3,.textdiv4{
    display: table-cell;  
    width:80px;
    height:30px;
    padding:10px 0;
    vertical-align:middle;
    text-align: center;
    border:1px solid #000;
}

html

<body>
    <div class="all-wraper">
        <div class='div1'>
            <img src='./1.jpg' />
            <div class='textdiv1'>见识类</div>
        </div>
        <div class='div2'>
            <img src='./1.jpg' />
            <div class='textdiv2'>学生价</div>
        </div>
        <div class='div3'>
            <img src='./1.jpg' />
            <div class="textdiv3">至数据</div>
        </div>
        <div class='div4'>
            <img src='./1.jpg' />
            <div class="textdiv4">数据流</div>
        </div>
    </div>
</body>

3 两种方法实现

DIV中文字实现垂直水平居中—博客

今天备忘录了吗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS文本和div垂直居中方法总结
09-24
主要介绍了CSS文本和div垂直居中方法总结，包括多行文本垂直居中,单行文本垂直居中,子div垂直居中，感兴趣的小伙伴们可以参考一下
5种div 内容水平垂直居中方法
等花开一起压花路
05-25 1万+
以上五种方法都能实现 div 中内容的水平垂直居中，具体使用哪种方法可以根据具体的项目需求和适用场景来决定。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。
div文字垂直居中的方法有哪些？
qq_27009517的博客
05-14 1万+
首先我们应该知道文字的水平居中比较简单，行级元素设置其父元素的text-aligncenter，块级元素设置其本身的left和rightmargins为auto即可。但是div文字的垂直居中就不是那么简单了，所以我们就来具体看看div文字垂直居中的几种实现方法。 1、vertical-align属性让文字居中 vertical-align值有很多，常用的就是middle，bottom，text-bottom等，然而真实使用的时候，我们会发现这个属性“时灵时不灵”，有些情况下我们加了这个...
CSS总结div中的内容垂直居中的五种方法
weixin_34342992的博客
09-14 2987
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它...
div元素里如何实现文字垂直居中
Youweretrouble的博客
03-18 1942
这个问题我经常忘记，所以记录一下。
DIV居中及DIV垂直居中.html
05-16
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
CSS教程之div垂直居中的多种方法
09-24
主要为大家详细介绍了CSS教程之div垂直居中的多种方法，还包括多行文本垂直居中的方法，感兴趣的小伙伴们可以参考一下
div垂直居中-CSS元素垂直居中方法的探究
06-11
针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。
如何实现div中的文字垂直水平居中
weixin_43322018的博客
06-27 1万+
文字居中 文字水平垂直居中可以使用： //方法一 //设置line-height和div的height实现垂直居中，text-align实现水平居中 height: 50px; line-height: 50px； text-align: center; //方法二 //设置文字外的div的display为flex，设置主轴和交叉轴的值 //也可以设置其他的值让文字出现在想放的地方 display: flex; justify-content: center; align-i
CSS——div垂直居中及div内文字垂直居中
aiyizou6070的博客
03-19 779
　　最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。 一、div垂直居中的一些方法： 1.当height、width固定大小时， <!DOCTYPE html> <html> <head> <meta chars...
div中的内容垂直居中的五种方法
夜空中最亮的星
06-19 889
div中的内容垂直居中的五种方法 一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： 1 p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达
div 垂直居中的六种方法
热门推荐
liufeifeinanfeng的博客
11-23 24万+
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用：单行文本垂直居中，demo 代码：
CSS教程：div垂直居中的N种方法
weixin_30882895的博客
08-23 811
在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生 效，例如表格元素中的<td>、<th>、<capt...
如何将div中的内容垂直居中
qq_40603010的博客
09-23 5531
如何将div中的内容垂直居中 第一种方法: 在div里面添加：text-align:center; line-height: 60px; 这里的line-height是行高，这个根据你的div的高度要调一下。 第二种方法: 就是改变div的属性，让其display属性为table-cell，我们知道table单元格中可以通过vertical-align垂直居中，转化后也可以用此属性， 在div里面添加：display:table-cell; vertical-align: middle; 综上所述，将div
文本图片垂直水平居中显示
Eighteen Z
01-17 13万+
文字居中 垂直居中（vertical-align） 我们都知道有这么一个属性可以让图片，文本等在元素中垂直居中 vertical-align:middle; vertical-align值有很多，常用的就是middle，bottom，text-bottom等，我们先说middle。 vertical-align时而没效果 然而真实使用的时候，我们会发现这个属性“时灵时不灵”...
长文本文本在div中垂直居中
hpf_huang的博客
09-29 1960
单行文本垂直居中直接使用： line-height： 10px; 但是如果多行用这个会造成样式混乱，若要匹配多行，则在div和p标签直接在添加一层div &lt;div class="a"&gt; &lt;div class="b"&gt; &lt;p&gt;文本内容内容&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; .a { li
css 文本和div垂直居中方法汇总
诗渊的博客
07-04 20万+
本文总结了垂直居中的各种方法，包括单行文本垂直居中、多行文本垂直居中以及div垂直居中，列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法。
CSS总结div中的内容垂直居中的四种方法
duansamve的博客
04-10 4760
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 二、内边距（padding）法 另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:20px 0; } 三、模拟表格法 将容器设置为dis
文字在div中垂直居中
最新发布
06-01
可以通过使用CSS Flexbox布局来实现文字在div中垂直居中，以下是一种常用的方法： HTML结构： ``` <div class="container"> 这里是垂直居中的文本 </div> ``` CSS样式： ``` .container { display: flex; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值