vertical-align和text-align属性实现垂直水平居中
HTML:
<div class="box">
<div class="content">
<span class="span1"></span>
<span class="span2">一段文字呢一段文字呢一段文字呢</span>
</div>
</div>
CSS:
.box{
display: table;
width: 45%;
}
.content{
display: table-cell;
height: 180px;
vertical-align: middle;
background-color: aquamarine;
text-align: center;
}
.content span{
display: inline-block;
}
.content .span1{
vertical-align: middle;
width: 100px;
height: 60px;
background-color: cornflowerblue;
}
效果图如下:
未换行:
换行后如下:
vertical-align和text-align属性实现垂直水平居中的更多相关文章
- 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)
text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...
- HTML+css基础 Text文本属性
Text文本属性: 1.颜色 color color:red 2.文本缩进 text-indent 属性值 数字+px: text-indent:10px: 3.文本修饰 text-decorati ...
- css3之transform属性实现div不定宽高垂直水平居中
transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...
- 在各浏览器和各分辨率下如何让div内的table垂直水平居中?
本文主要针对需要全屏显示的系统页面内,因为系统经常会用到表格table布局,偶尔的table需要显示在div的正中间,所以鄙人特此总结下div内table的万千姿态. <!DOCTYPE htm ...
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- 【css】图片垂直水平居中
一.已知宽高的图片实现垂直水平居中 1.借助margin-top负边距实现垂直居中 <!DOCTYPE html> <html> <head> <meta c ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- CSS垂直水平居中方法总结
在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...
随机推荐
- [MySQL] 测试where group by order by的索引问题
1. select * from test where a=xx group by b order by c 如何加索引 CREATE TABLE `index_test` ( `id` int ...
- Go中多个返回值的技巧
直接上代码看个例子吧: package main import "fmt" //返回 X+Y 和 X*Y func Computer(X, Y int) (int, int) { ...
- Android开发过程中的坑及解决方法收录(三)
bug:应用出现了 不幸运的,应用已停止的错误提示 排除问题: 1.intent接收数据的字符串不匹配 2.java常见的NullPointerException(空指针错误),可能由三个原因引起,字 ...
- echarts饼图配置模板
var option = { title:{ text:'完成人构成分析--申报', //标题的样式 textSytle:{ //颜色 color : '#FF0000', //粗细 // fontW ...
- Hacking Box Droopy: v0.2
概述: 目标:get flag 下载链接: https://www.vulnhub.com/entry/droopy-v02,143/ 工具: kail linux 开工 1)扫描开道: # netd ...
- 利用efi功能更改bios主板被隐藏的设置(如超频)
整理自(来源): http://tieba.baidu.com/p/4934345324 ([新手教程]利用EFI启动盘修改 隐藏bios设置) http://tieba.baidu.com/p/49 ...
- OpenUDID 和 IDFA 比较
iOS标识符 现今来比较下,不同情况下两种标识符的变化情况.以下试验,每种标识符均分为存于Keychain和未存于Keychain的两种情况做比较. 广告标识符(IDFA-identifierForI ...
- Fragment 生命周期的详情
Fragment每个生命周期方法的意义.作用(注意红色的不是生命周期方法):setUserVisibleHint():设置Fragment可见或者不可见时会调用此方法.在该方法里面可以通过调用getU ...
- MySQL5.7参数log_timestamps
最近测试MySQL 5.7.21 Community Server这个版本的MySQL数据库时,发现其错误日志的时间跟系统当前时间不一致,后面检查发现日期时间格式都是UTC时间,查了一下相关资料,原 ...
- Redis可视化工具 Redis Desktop Manager
1.前言 从接触Redis也有两年,平时就使用它来做缓存层,它给我的印象就是很强大,内置的数据结构很齐全,加上Redis5.0的到来,新增了很多特色功能.而Redis5.0最大的新特性就是多出了一个数 ...