绝对定位多个字居中显示的css
在工作中遇到一种情况,例如把一个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的更多相关文章
- 绝对定位的DIV绝对居中显示
绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...
- CSS基础之居中显示
这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...
- css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)
1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div 设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...
- css div居中显示的4种写法
Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...
- CSS——盒子居中显示
嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...
- CSS文本居中显示
因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...
- 简单两步使用css控制div下导航栏ul居中显示
第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...
- css实现一行居中显示,两行靠左显示,超过两行以引号省略
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css 字体上下居中显示 解决安卓手机line-height的偏差
1.字体左右居中显示 text-align: center <div class="font"> 上下居中 </div> .font{ width: ...
随机推荐
- iis下php 500错误
很不想用iis,然而客户不想增加机器,只好按客户的意思了.可是没想到发送短信以在本地 机器上是好的,在iis下直接500. 一开始以为是防火墙问题,后来检查了一下没有,再后来换了一个短信接口, ...
- jsp----标签编程(JSTL)
标签编程简介 JSP的开发是在HTML代码中嵌入了大量的Java代码,但是这样一来会使得JSP页面中充满了Java程序,修改或维护起来非常的不方便, 定义一个简单的标签----空标签 要想实现一个标签 ...
- docker探索-swarm搭建docker集群(七)
前言 Swarm 在 Docker 1.12 版本之前属于一个独立的项目,在 Docker 1.12 版本发布之后,该项目合并到了 Docker 中,成为 Docker 的一个子命令,docker s ...
- 【WPF】使用CefSharp嵌入HTML网页
需求:WPF项目中要做用户的商铺主页,由于考虑到每个商家的主页布局各不相同,不能用XAML写死布局.最好的办法是WPF这边XAML写好一个容器,用户使用HTML可视化编辑器(比如这个)来准备好网页,输 ...
- am335x ar8031 双网口配置记录
kernel version 4.4.12 ar8031 phy 驱动是: kernel_4.4.12/drivers/net/phy/at803.c kernel make menuconfig d ...
- 【转】Graphics 关于呈现质量与合成模式
GDI+相关的作图,每种语言都有其自身的封装类,但本质上是一样的,下面这篇文章写的非常好,对于C#的Graphics类也是使用的,所以转载了,原文在这里: http://www.cnblogs.com ...
- c# 读取excel数据的两种方法
转载自:http://developer.51cto.com/art/201302/380622.htm, 方法一:OleDb: 用这种方法读取Excel速度还是非常的快的,但这种方式读取数据的时候不 ...
- UI设计,使用感知分层技术
页面设计时使用感知分层技术:不同的元素用不同的颜色表示,让它看起来是位于独立的一层之上.人们在无意识的状态下,只会感知到自己关注的元素,将其他元素排除在意识之外.
- 【转载】解决Windows和Ubuntu时间不一致的问题
大家在切换操作系统的时候会发现一个问题, Windows 和Ubuntu的时间会出现不一致的情况.在 Windows 中把时间设置正确了过后,回到在 Ubuntu 后系统的时间又不一样了,在 Ubun ...
- VS2013安装MVC5
打开VS 选择 .net 4.5 创建项目 右击项目 选择管理NuGet 输入Microsoft.AspNet.Mvc -Version 5.0.0 安装最新版本的MVC5