多行文本居中显示问题处理

最新推荐文章于 2022-11-22 12:06:58 发布
最新推荐文章于 2022-11-22 12:06:58 发布
阅读量688 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38615014/article/details/86290460
版权

以下为代码：

<!DOCTYPE html>
<html>
 <head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css"> 
 div {
     float:left;
  width:345px;
  height:112px;
  padding: 20px;
  box-sizing: border-box;
  border:1px solid #FF0099;
  text-align: center;
      text-overflow: ellipsis;
 }
 /*#wrap span {
  line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
 }*/
 *{
                list-style: none;
                margin:0 ;
                padding: 0;
                box-sizing: border-box;
            }
            .juzhong{
                white-space: nowrap;/*不换行*/
                overflow-x: auto;
                overflow-y: hidden;
                font-size: 0;/*解决bug*/
            }
            .juzhong li{
                display: inline-block;
                position: relative;
                box-sizing: border-box;
                width:345px;
                height:112px;
                padding: 20px;
                    white-space: normal;
                margin-right: 12px;
                border: 1px solid #13B636;
                border-radius: 8px;
            }
            /*.juzhong li span{
                position: absolute;
                width:300px;
                line-height: 25px;
                font-size: 16px;
                text-align: center;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                overflow: hidden;
                -webkit-box-orient: vertical;
                white-space: normal;
            }*/

.juzhong li a{
         display: block;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    line-height: 18px;
    width: 100%;
    height: 100%;
    font-size: 14px;
    padding: 0 8px 0 8px;
    vertical-align: middle;
    border-radius: 2px;
    background-color: rgba(255,255,255,.1);
 }
     .juzhong li a span{
         display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
 }
  </style>
 </head>
 <body>
     <!--<div id="wrap">
         <span>
          现在我们要使这现在我们要示们要使这段文字中显示
        </span>
     </div>
     <div id="wrap">
         <span>
          现在我们要使这现在我们要示现在我们要使这段文字垂直居中显示使这段文字垂直居中显示现在我们要使这段文字垂直居中显示现在我们要使这段文字垂直居中显示
          现在我们要使这段文字垂直居中显示段文字垂直居中显示！m 
        </span>
     </div>-->
    <ul class="juzhong">
         <li><a><span>行内块元素多行居中小处理块元素多行居中小处理行内内块元素多行居中小处理</span></a></li>
         <li><a><span>行内块元素多行居中小处理行内块元素多行居中小处理行内块元素多行居中小处理块元素多行居中小处理行内块元素多行居中小处理块元素多行居中小处理行内块元素多行居中小处理行内块元素多行居中小处理</span></a></li>
         <li><a><span>行内块元素多行居</span></a></li>
         <li><a><span>行内块元素行行内块元素多行居行内块元素多行居内块元素多行居多行居</span></a></li>
         <li><a><span>行内块元素行内块元素多行居行内块元素多行居多行居</span></a></li   
     </ul>
 </body>
</html>

Fighting_01
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
qt 使用textBrowser显示文字和图片，文字居中，图片居中，已测可用
m0_45463480的博客
05-10 1909
【代码】qt 使用textBrowser显示文字和图片，文字居中，图片居中，已测可用。
delphi android 多行文本居中apk
03-30
当你需要在Android设备上实现多行文本居中的功能时，这通常涉及到UI设计和布局管理。本篇将深入探讨如何使用Delphi来创建一个Android APK，使得多行文本能够自动居中显示。 1. **布局文件（Layout File）**： 在...
实现多行文本垂直居中
weixin_39357177的博客
08-29 372
方法一： 1. 对父元素设置display:table属性 2. 对文本设置display:table-cell和vertical-align:middle属性　 &lt;style&gt; .box{ width: 500px; height: 500px; display: table; border: 1px solid #333; } .box ...
单行文本居中、多行文本居中、块元素居中、行内元素居中、行内块状元素居中
WikL116824的博客
08-10 415
1.单行文本居中 设置水平居中：text-align:center 设置垂直居中: line-height:后面的属性值与容器的高度一致 <style> .box1{ width:200px; height:200px; border:1px solid black; /* 水平方向 */ text-align:center; /* 垂直方向 */ line-height:200px; } </style> <body> <d
多行文本垂直居中的三种方法
carpenterworm1874的博客
03-23 2万+
本篇是我整理的多行文本垂直居中的三种方法效果图如下图方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中&lt;div class="span_box bg_box"&gt; &lt;span class="words_span"&gt; 方法一：父元素使用display:...
文本在盒子中水平、垂直居中（图片与文本居中）、多行文本垂直居中、盒子居中
热门推荐
muzidigbig的博客
05-23 3万+
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的&lt;td&gt;、&lt;t...
实现多行文字垂直居中几种方法及其解析
qq_47443027的博客
03-16 1622
　　场景：父元素 高度固定，如何使其中的文字垂直居中？ 1、table布局： 　　利用display:table+display:table-cell的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .middle-box{
CSS设置多行文本垂直居中的方法
09-25
单行文本居中比较简单，就是将line-height设置成和height一样就可以了，对于多行文本，这种方式就行不通了，使用width，height必须使用px单位，再配合vertial-align:middle和display:table-cell属性即可实现
css多行文本垂直居中
09-27
css 多行文本垂直居中显示，兼容各大浏览器！
关于多行文字水平垂直居中的一点心得分享
09-25
创建一个包含多行文本的容器（`.wrapper`），并为其设置固定宽度和高度，背景色以便观察效果。然后，为`.wrapper`添加`:before`伪元素，内容为空点（`.`），使其作为内联块元素，并设置`vertical-align: middle`，...
多行文字垂直居中实现--四种方法
liuliuhhxxttxs的博客
11-22 1385
center，即定义flex子项在flex容器侧轴方向上的对齐方式为center。4. 利用flex弹性布局，将父元素设置为弹性盒子，并设置父元素。设置vertical-align: middle。2. 先对父元素设置高度和行高（相等）3. 先将子元素设置为行内块元素。，再对子元素设置相对。
css:实现多行文本居中的五种方法
YangLu888
10-09 4740
css实现多行文本居中的五种方法
python字符串格式化，左右对齐、居中对齐（format）。
qq_45883336的博客
06-01 9282
Python打印格式化打印
HTML 中多行文本垂直居中
liuying1802028915的博客
03-01 1万+
    最近在做官网，其中有个小小的需求是一段多行文本在一个区域内垂直居中，就如下图所示：    需要将右面的文字垂直居中，通过网上查找资料显示可以使用display:table 的方法来实现。    请看这篇博文; http://blog.csdn.net/u014607184/article/details/51820508    这篇博文中讲道德是 垂直居中的问题，它分为单行文本垂直居中和多...
多行文字居中
weixin_33968104的博客
05-21 101
对之前css居中的一点补充 1. 单行文字居中 设置line-height等于元素高度即可 2. 多行文字居中 2.1 table-cell里对span居中 <style type="text/css"> *{ margin: 0; padding: 0; } #right{ width: 100px; height: 200px; text-align: c...
多行文字如何让每行文字都居中
allanGold
06-17 3041
NSString *str = @"测试文本：这是第一行比较长的文本内容吧，这是第二行比第一行短的字"; NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:str]; NSMutableParagraphStyle *paragraphSty...
web前端技巧-文本如何垂直居中？多行文本如何实现上下居中？
xiaoxijinger的博客
07-29 6579
做前端开发的同学肯定对文本居中不陌生，但一般我们说的都是水平居中也就是左右居中，那么你想过没有如何实现垂直居中也就是上下居中吗？今天小千就来给大家介绍一下。 单行文字垂直居中—行高等于高度值 上面的方法只适用于单行文本，多行文本使用就会出现问题，那么如何实现多行文本垂直居中呢？ 多行文本垂直居中 1、模拟表格 将父元素div 模拟成表格table,子元素span模拟成表格单元格；让子元素设置vertical-align:middle来实现。 2、模拟表格单元格 3、将子元素设置为行内块元素，模拟成单行
html,div中多行文字垂直居中
一杯苦恰啡的博客
05-23 4323
css代码.name { height: 150px; width: 150px; vertical-align:middle; display:table-cell; } .shop { width: 100%; height: 150px; margin-top: 15px; border:1px solid #E0E0E0;
如何实现单行与多行文字的居中
weixin_34268169的博客
07-27 716
在项目中遇到一个问题，在一个宽度为百分比形式设定宽度的div中，文字可能不多但是也可能较多，会超过一行。怎么才能做到不管1行还是2行3行，文字都可以上下左右居中呈现。 解决方法： 1使用flex 只需要这样设置css属性即可 div{ display: -webkit-flex; display: flex; -webkit-align-items: center; a...
css 多行文本水平居中
最新发布
10-12
可以使用以下 CSS 样式实现多行文本水平居中： ```css .container { display: flex; justify-content: center; align-items: center; text-align: center; } ``` 其中，`display: flex` 将容器设置为弹性布局...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值