css文字居中、图片居中、div居中解决方案
一、文字居中
若文字只有一行
<!--html代码--> <div class="box"> <p class="text">文本只有一行</p> </div> <!--css代码--> .box { width: 200px; height: 200px; background-color: red; } .text { line-height: 200px; text-align: center; }
若文字行数未知
<!--html代码--> <div class="box"> <div class="box_inner"> <p>文本行数未知</p> </div> </div> <!--css代码--> .box { width: 200px; height: 200px; background-color: red; display: table; } .box_inner { display: table-cell; vertical-align: middle; text-align: center; }
二、图片居中
表格法,跟上面文本行数未知居中一样,只是把<p>标签换为<img>标签
背景法
<!--html代码--> <div class="box"></div> <!--css代码--> .box { width: 200px; height: 200px; background: url(...) no-repeat center center; }
三、div居中
若div只是水平方向居中,可以设置margin:0 auto实现
div水平垂直居中(方法一)
<!--html代码--> <div class="box"> <div class="box_inner"></div> </div> <!--css代码--> .box { width: 200px; height: 200px; background-color: red; position: relative; } .box_inner { width: 50px; height: 50px; background-color: green; position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; }
div水平垂直居中(方法二)
<!--html代码--> <div class="box"> <div class="box_inner"></div> </div> <!--css代码--> .box { width: 200px; height: 200px; background-color: red; position: relative; } .box_inner { width: 50px; height: 50px; background-color: green; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; }
div水平垂直居中(方法三)
<!--html代码--> <div class="box"> <div class="box_inner"></div> </div> <!--css代码--> .box { width: 200px; height: 200px; background-color: red; position: relative; } .box_inner { width: 50px; height: 50px; background-color: green; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
以上三种方法思路都是通过设置div绝对定位,先居中左上角,再补齐。
div水平垂直居中(方法四)
<!--html--> <div class="box"> <div></div> </div> <!--css--> .box { justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中 display:flex; }
css文字居中、图片居中、div居中解决方案的更多相关文章
- css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)
一.原始的居中方法是把div换成table <div style="width: 500px; height: 200px; border: solid 1px red; text-a ...
- css文字环绕图片--遇到的问题及解决方法
一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
- HTML/CSS实现文字环绕图片布局
原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...
- 关于div居中
margin : 100px; margin-left: auto; margin-right: auto; 这样子设置css样式就可以实现一个div居中
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- [转]div 让文字或图片居中
本文转自:http://qsfwy.iteye.com/blog/250206 在div 中让 文字或图片居中,请参考以下代码1: - - - - - - - - - - - - - - - - - ...
- CSS布局,div居中,文字居中
.main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...
随机推荐
- Linux根据UUID自动挂载磁盘分区
一般服务器都有多个硬盘分区,在重启后,这些分区的逻辑位置加载时可能会发生变动,如果使用传统的设备名称(例如:/dev/sda)方式挂载磁盘,就可能因为磁盘顺序变化而造成混乱. Linux环境中每个Bl ...
- HDU 3944 DP? [Lucas定理 诡异的预处理]
DP? Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 128000/128000 K (Java/Others)Total Subm ...
- BZOJ 1069: [SCOI2007]最大土地面积 [旋转卡壳]
1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 2978 Solved: 1173[Submit][Sta ...
- 使用angular/react/vue实现相同的面试题组件
面试题要求如下所示 1.angular: <!DOCTYPE html><html lang="en"><head> <meta char ...
- Vue脚手架(vue-cli)安装总结
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...
- 解决xshell评估期已过的问题
问题:时间长没有打开xshell,今天突然打开提示评估期已过,如下图所示: 点击采购会弹出购买的界面,(对于我们这些程序屌怎么会花899购买一款软件)点击取消就会退出. 解决方法: 卸载这个要收费的版 ...
- Vue站点的搭建之旅
背景 很久没写博客了,这次博客分享一下最近上班空闲时间做的两个业余Demo.分别是V电影App的移动端站点[一直很喜欢用这个APP可是他们没有出对应的mobile端,所以自己开发一个, ...
- JavaScript 知识点
JS基础 页面由三部分组成: html:超文本标记语言,负责页面结构 css:层叠样式表,负责页面样式 js:轻量级的脚本语言,负责页面的动效和数据交互 小总结:结构,样式和行为,三者相分离 在htm ...
- iptables转发备忘
iptables -F sysctl net.ipv4.ip_forward=1 iptables -t nat -A PREROUTING -p tcp -i eth0 --dport 8766 - ...
- 使用Socket对序列化数据进行传输(基于C#)
客户端代码 [Serializable] // 表示该类可以被序列化 class Person{ public string name; public void HI() { Debug.Log(na ...