如何让一个字数不定,行数不定的文字居中?(代码片段)

橘子柚子橙子 橘子柚子橙子     2022-11-09     570

关键词:

这两天写页面的时候,遇到一个问题:如何让一段行数和字数不定的文字居于区块的中央

下面是我的方法,可能有点麻烦。

如果路过的各位前辈,有更好的方法,还请在留言中指出。非常感谢。

*** 结构 ***

  <div class="item">
        <div class="pic_wrapper">
            <img src="https://dummyimage.com/120.png/09f/fff" alt="作者的头像">
        </div>
        <div class="title_wrapper">
            <p class="title_inner">
                <span class="title_txt">
                    作者演讲内容的标题,这个标题可能很长,也可能很短。但是无论长度,最好都是让这个标题居中显示!
                </span>
            </p>
        </div>
    </div>

*** 样式 ***

.item
    height: 200px;
    background: #f7f7f7;
    border: 1px solid #ccc;
    width: 120px;
        
.pic_wrapper
     width: 100%;
     height: 120px;
     overflow: hidden;
        
img
     width: 100%;
        
.title_wrapper
     height: 80px;
     display: table;
     font-size: 12px;
     padding: 5px;
     box-sizing: border-box;
        
.title_inner
      display: table-cell;
      vertical-align: middle;
        
.title_txt
       display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        

实现文字居中的要点是:

  1. 外层容器设置属性display:table
    2.内容容器设置属性display:tabel-cell;vertical-align:middle

这样就可以了。

大致效果如截图:

--- end---

npoi计算单元格高度(代码片段)

需求要导出一个Excel,第一行是不定长字符串,合并单元格(A-G)已知,现要计算第一行的高度。思路已知,NPOI的宽度单位是1/256个英文字符,在本例中,A列的宽度是2048,即2048/256=8个英文字符。在A4单元格里也可以看出。如下... 查看详情

css两层实现垂直居中(外层固定宽高,内层文本不定行数)

style代码.inner{   width:45%;   height:60px;   float:left;   border:1pxsolid#eeeeee;   text-align:center;   display:table;}.outer.inner{   display:table-cell;   vertical-align:middle;   padding:02px;}h 查看详情

不定宽高水平垂直居中

1<divid="demo">2<p>这是一个终极实现的水平垂直居中实例</p>3<!--[ifltIE8]><span></span><![endif]-->4</div>5#demo{6height:100px;7text-align:center;8font-size:0;//注意这里是去除文字间 查看详情

不定宽块状元素居中方法

  在实际的编写代码过程中,我们会遇到要为“不定宽块状元素”设置居中,比如网页上的分页导航,因为分页的数量不确定,所以我们不能通过设置宽度来限制它的弹性。不定宽的块状元素有三种方法设置居中:一、设置tab... 查看详情

居中(水平+垂直,浮动+定位,定宽+不定宽)

元素居中,是前端工作者一个老生常谈的话题,网上相关的资料很多,不同的人有不同的理解(不排除有直接copy的),这里我从实际项目需求出发,经过多次试验和总结,得出以下几种居中方法供大家试用并指正:1.单纯只是水... 查看详情

c语言格式化输入不定长数组

...tdio.h>#include<stdlib.h>//从一行标准输入中格式化输入一个不定长数组voidinputVec();//读入给定行数的不定长数组voidinputVecs1();//读入不确定行数不定长数组voidinputVecs2();voidmain(){ inputVecs1(); return;}voi 查看详情

不定参数(rest参数...)(代码片段)

不定参数如何实现不定参数使用过underscore.js的人,肯定都使用过以下几个方法:_.without(array,*values)//返回一个删除所有values值后的array副本_.union(*arrays)//返回传入的arrays(数组)并集_.difference(array,*others)//返回来自array参数数组,... 查看详情

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

...让图片根据宽高来自适应显示在页面上。那么使用纯css该如何实现不定宽高的图片居中裁剪呢? mate标签:<metaname="viewport"content="width=device-w 查看详情

css之文本溢出隐藏,不定宽高元素垂直水平居中禁止页面文本复制

1、如何让不固定元素宽高的元素垂直水平居中1.center{2position:absolute;3top:50%;4left:50%;5background-color:#000;6width:50%;7height:50%;8transform:translateX(-50%)translateY(-50%);9}flex布局写法:1.center{2display:flex;3justify 查看详情

css不定高度实现垂直居中

...sition:absolute;top:50%;transform:translateY(-50%);}2.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可parentElement{height:xxx;}.chi 查看详情

c++使用不定参数(代码片段)

定义不定参数,使用的宏有:va_start(ap,arg) 初始化一个va_list的变量apva_arg(ap,type) 获取下一个type类型的参数va_end(ap) 结束使用ap#include<stdarg.h>#include<stdio.h>intsum(intcnt,...)intsum=0;va_listap;va_sta 查看详情

文字编辑框,如何限制行数,和每行的字数?

就是一个文本编辑框,要求限制可输入的行数和每行的字数。只能限制文本框是单行或者多行,不能说限制为固定行数,而且字数只能限制总长度不能限制每行输入多少字参考技术A用js写也不是很难吗?<script>functioncheck()varn... 查看详情

44.不定长参数元组(代码片段)

<2>.不定长参数有时可能需要一个函数能处理比当初声明时更多的参数,这些参数叫做不定长参数,声明时不会命名。基本语法如下:#计算2个任意数求和defadd2num(a,b):returna+b#计算3个任意数的求和defadd3num(a,b,c):returna+b+c#计算n个... 查看详情

你如何让图像在 iPhone 主屏幕上摇摆不定?

】你如何让图像在iPhone主屏幕上摇摆不定?【英文标题】:HowdoyoumakeimageswobblelikeontheiPhonehomescreen?【发布时间】:2011-02-1219:29:19【问题描述】:我的应用程序中有许多图标,我希望以类似于您尝试从iPhone的主屏幕删除应用程序时... 查看详情

了解golang的不定参数(...parameters),这一篇就够了(代码片段)

...数出场了。 golang的不定参数顾名思义,不定参数就是一个占位符,你可以将1个或者多个参数赋值给这个 查看详情

实现div里的内容垂直居中(代码片段)

---恢复内容开始---在项目中我们会遇到这种情况,一个div的宽固定,里面的内容长度不定,不管是一行还是多行,都要垂直居中,有俩个实现方法:1、使用absolute,top:50%,transform:translateY(-50%)1<divclass="text">2<p>王企鹅我... 查看详情

关于内容垂直居中(不定高)

css样式实现内容的垂直居中:一:不定高1:存在兼容性问题,低版本的火狐,对于display:flex的不兼容display:flex; justify-content:center; align-items:center; 2:同样存在兼容性问题display:table-cell;vertical-align:middle;3:top:50%;transform:tr... 查看详情

css如何让浮动元素水平居中

对于定宽的非浮动元素我们可以在CSS中用margin:0auto进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助到大家。... 查看详情