在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定位并加一个宽度,内层div居中

.box03 .percent {
position: absolute;
right: 31%;
top: 12%;
width: 100px;
font-family: arial;
font-weight: bold;
color: #e83522;
font-size: 1rem;
}
.box03 .percent span{
display: inline-block;
text-align: center;
width: 100%;
}

绝对定位多个字居中显示的css的更多相关文章

  1. 绝对定位的DIV绝对居中显示

    绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...

  2. CSS基础之居中显示

    这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...

  3. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  4. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

  5. CSS——盒子居中显示

    嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...

  6. CSS文本居中显示

    因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...

  7. 简单两步使用css控制div下导航栏ul居中显示

    第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...

  8. css实现一行居中显示,两行靠左显示,超过两行以引号省略

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css 字体上下居中显示 解决安卓手机line-height的偏差

      1.字体左右居中显示 text-align: center   <div class="font"> 上下居中 </div> .font{ width: ...

随机推荐

  1. [转]mysql如何利用Navicat 导出和导入数据库

    MySql是我们经常用到的数据,无论是开发人员用来练习,还是小型私服游戏服务器,或者是个人软件使用,都十分方便.对于做一些个人辅助软件,选择mysql数据库是个明智的选择,有一个好的工具更是事半功倍, ...

  2. js+jquery检测用户浏览器型号(转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 图像颜色--opencv scalar

    Scalar定义可存放1—4个数值的数值,其结构体如下: typedef struct Scalar { double val[4]; }Scalar; 例如:Scalar s: 如果使用的图像是1通 ...

  4. Oracel扩展表空间

    --表空间查看 SELECT tbs, sum(totalM) as total, sum(usedM) as UserdM, sum(remainedM) as remainedM, as User ...

  5. linux brctl command not found

    [root@localhost ~]# brctl-bash: brctl: command not found 解决方法: [root@localhost ~]# yum install bridg ...

  6. 反射setAccessible()方法

    java代码中,常常将一个类的成员变量置为private 在类的外面获取此类的私有成员变量的value时,需要注意: 测试类: public class AccessibleTest { privat ...

  7. PCL点云曲面重建(1)

    在测量较小的数据时会产生一些误差,这些误差所造成的不规则数据如果直接拿来曲面重建的话,会使得重建的曲面不光滑或者有漏洞,可以采用对数据重采样来解决这样问题,通过对周围的数据点进行高阶多项式插值来重建表 ...

  8. Java设计模式(15)备忘录模式(Memento模式)

    Memento定义:memento是一个保存另外一个对象内部状态拷贝的对象,这样以后就可以将该对象恢复到原先保存的状态. Memento模式相对也比较好理解,我们看下列代码: public class ...

  9. 【协议学习】SIP基本场景分析

    1.SIP业务基本知识 1.1 业务介绍 会话初始协议(Session Initiation Protocol)是一种信令协议,用于初始.管理和终止网络中的语音和视频会话,具体地说就是用来生成.修改和 ...

  10. Qt 菜鸟的坑 QAbstractSocket::isValid()

    我曾经多次在 Qt socket 编程中使用 tcpSocket.isValid 来判断我当前的连接是否可用,最近写程序时才发现此法并不妥当. bool QAbstractSocket::isVali ...