CSS 文本垂直居中对齐
文本垂直居中对齐是一个很常见的问题,这里总结一下。
一、容器高度固定,单行文本垂直居中对齐
height:20px;
line-height:20px;
overflow:hidden;
二、容器高度固定,多行文本垂直居中对齐
padding-top:10px;
padding-bottom:10px;
line-height:20px;
三、容器高度自适,单行/多行文本垂直居中对齐
.targetList dl dt div {
width:265px;
height:50px;
display:table-cell;
vertical-align:middle;
}
.targetList dl dt strong {
text-decoration:none;
font-size:16px;
line-height:16px;
color:#177bb0;
font-weight:bold;
vertical-align:middle;
}
先这样。
CSS 文本垂直居中对齐的更多相关文章
- html文本垂直居中对齐
html文本垂直居中对齐,代码如下: <div id="box" style="height:100px; line-height:100px; border:1p ...
- css文本两端对齐
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...
- css文本垂直居中的实现
本案例已经有新的比较简便的解决方案,可以直接采用 vertical-align:middle 样式对行内元素进行垂直居中布局,详见: 微信小程序开发——如何让商品标题类文本根据内容长度垂直居中. 以下 ...
- css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
- css 文本两端对齐
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...
- css文本垂直居中
1,一般flexca 2,行高 3,行高加边框或者透明边框
- CSS文本垂直居中显示
<style> .sty1 { width: 300px; height: 200px; background-color: black; text-align: center; colo ...
- div中字垂直居中对齐
div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...
- css 文本和div垂直居中方法汇总
https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...
随机推荐
- [Pytorch]PyTorch使用tensorboardX(转
文章来源: https://zhuanlan.zhihu.com/p/35675109 https://www.aiuai.cn/aifarm646.html 之前用pytorch是手动记录数据做图, ...
- appium 处理滑动的方法
appium 处理滑动的方法是 swipe(int start-x, int start-y, int end-x, int end-y, int during) - Method in class ...
- Uncaught SyntaxError: Unexpected end of input 突然报了这个错
最后排查:把 return true 注掉好了,接着在打开注释,依然不报错.最后不报错了.0.0 ~~~
- 毕业设计总结(1)-canvas画图
去年6月底完成的毕业设计,到现在也才开始给它做个总结,里面有很多可以学习和借鉴的东西. 我的毕业设计的题目是“一种路径规划算法的改进与设计”,具体的要求可参见下面的表格: 题目 一种路径规划算法的改进 ...
- POJ-3659-最小支配集裸题/树形dp
Cell Phone Network Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7127 Accepted: 254 ...
- Hadoop出现 Wrong FS: hdfs://......错误的解决方法
今天在hadoop项目中出现以下报错:java.lang.IllegalArgumentException: Wrong FS: hdfs://......,expected: file:///... ...
- Math Issues
Oh no, our Math object was "accidently" reset. Can you re-implement some of those function ...
- 029——VUE中键盘语义修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【nynu】 妹妹的工资怎么算(二分)
题目链接:http://47.93.252.151/problem.php?id=1148 题目描述 <我的妹妹哪有这么可爱!>中的女主叫做高坂桐乃,高坂家的幺女,外表出众.成绩优秀.运动 ...
- Shell脚本编写规范
shell脚本需要有较高的实用性.可维护.可阅读.方便他人阅读,因而需要建立一定的规范来操作 dream361@master:~$ cat test2.sh #!/bin/bash 所使用的bash程 ...