关于照片(img)的水平居中和垂直居中
本文主要是讲述照片(img)的水平居中和垂直居中,但是其他元素的水平居中和垂直居中也可借鉴此文。
水平居中:
1.将img元素设置成块级元素
img {display: block;margin: 0 auto;}
2.flex布局
.box1 {width: 100px;height: 100px;background-color: aquamarine;display: flex;justify-content: center;}
3.父元素设置text-align:center
.box1 {width: 100px;height: 100px;background-color: aquamarine;text-align: center;}
4.定位
img {width: 50px;height: 50px;position: relative;left: 50%;transform: translateX(-50%);}
垂直居中:
1.flex布局
.box1 {width: 100px;height: 100px;background-color: aquamarine;display: flex;align-items: center; /* 对单行弹性盒子模型使用可以使用 *//* align-content: center; 通常使用该属性设置垂直居中,但是该属性对单行弹性盒子模型无效。(即:带有 flex-wrap: nowrap ,或者盒子中本来就只有一个元素)。*/}
tip:CSS align-items属性将所有直接子节点上的align-self值设置为一个组。align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。
2.display:table-cell
.box1 {width: 100px;height: 100px;background-color: aquamarine;display: table-cell;vertical-align: middle;}
3.定位
img {width: 50px;height: 50px;position: relative;top: 50%;transform: translateY(-50%);}
tip:通过设置line-height等于父元素高度可以使单行文字实现垂直居中。
代码样例(example):
CSS:
.container {width: 400px;height: 800px;background-color: aliceblue;display: flex;justify-content: center;align-items: center;margin: 0 auto;}.box1 {width: 200px;height: 200px;background-color: aquamarine;/* display: flex;align-items: center; *//* 对单行弹性盒子模型使用可以使用 *//* align-content: center; 通常使用该属性设置垂直居中,但是该属性对单行弹性盒子模型无效。(即:带有 flex-wrap: nowrap)。*/}.box1 img {width: 100px;height: 100px;position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);/* display: block;margin: 0,auto; */}
关于照片(img)的水平居中和垂直居中相关推荐
- css水平垂直居中_css 如何实现水平居中、垂直居中(超全面)
前言:元素一般分为 块级元素 和 行内元素 块级元素可以设置高度,宽度,行内元素则不能,如果非要给行内元素设置宽高,只需要将 display 属性设置为 inline-block 即可 一.水平对齐 ...
- HTML元素水平居中和垂直居中
目标:设置html元素水平居中和垂直居中,介绍三种方法. 方法一:推荐,兼容性好,没有冲突 <!DOCTYPE html> <html lang="en"> ...
- php垂直居中代码_div标签:水平居中和垂直居中的实现(附代码)
本篇文章给大家带来的内容是关于div标签:水平居中和垂直居中的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在前端开发时,经常会遇到需要居中的情形,居中分2种情况,一个是水平居 ...
- CSS3 Flexbox轻松实现元素的水平居中和垂直居中
网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,赶上新技 ...
- CSS设置元素水平居中、垂直居中方式汇总
按照水平居中.垂直居中.行内元素.块级元素等条件进行组合获取效果 水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: . ...
- POI单元格合并(合并后边框空白修复)、自动列宽、水平居中、垂直居中、设置背景颜色、设置字体等常见问题
POI单元格合并.自动列宽.水平居中.垂直居中.设置背景颜色.设置字体等常用方法 POI设置单元格样式 POI设置文字 POI设置边框样式 POI设置文字水平居中.垂直居中 POI设置背景颜色 POI ...
- bootstrap 页面垂直居中_bootstrap4如何实现div的水平居中以及垂直居中
bootstrap是一款十分流行的前端组件库,我们在制作模板的时候,使用bootstrap会提高工作效率,减少自己写css样式的麻烦.鲶鱼CMS系统的官方主题大部分是使用bootstrap来制作的,当 ...
- 移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性 在移动端时可以放心的使用h5相关的标签 但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
- CSS水平居中,垂直居中,水平垂直居中
本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 水平居中 1.行内元素水平居中 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中.此方法对 ...
- CSS实现水平居中与垂直居中
CSS实现水平居中与垂直居中 一.水平居中 1. 必备知识 1.1 text-align 属性 1.2 display 属性 1.3 margin 属性 1.4 position 属性 1.5 tra ...
最新文章
- 推荐一个MDI模式的远程桌面管理程序
- java定义一个方法,向控制台输出99乘法表
- Java动态加载jar及class文件
- Js获取当前日期时间及其它操作(转)
- AndroidStudio_开发工具的设置_快捷键设置_编辑器设置---Android原生开发工作笔记72
- ThinkPHP admin.php后台登录
- linux iphone文件,在linux下生成iphone所需要的视频和音频文件的方法总结
- 关于人工智能的实现(猜测)
- VMware Workstation 与 Device/Credential Guard 不兼容。在禁用 Device/Credenti--------------------------解决办法
- C++进阶教程之动态内存
- Zookeeper 入门指北
- WebServic调用天气预报服务
- 解决办法:configure: error: C compiler cannot create executables错误
- FastStone Capture 下载
- 多种企业常用网管软件介绍及配置说明(带视频)
- win8计算机无法安装打印机驱动程序,win8系统安装打印机驱动失败怎么办|win8系统安装打印机驱动失败的解决方法...
- 美国Java程序员收入和疫情期间面试心得体会
- python 矢量场的构造、计算;通过 matplotlib 作图、分析、筛选符合要求的像素点
- FLUENT进行组分反应模拟
- 压缩工具Bandizip
热门文章
- 制作u盘winpe启动盘_重装系统——制作U盘启动盘
- android PIN码解锁流程
- 浅谈对二分查找最大次数的理解
- 计算机网络vtp,VTP学习笔记(二)
- 使用UDP遇到的问题小结
- 一款JavaScript 混淆(Obfuscator)工具(Tool)的研究(六)更新
- 如何用hb制作一个html网页,HTML网页制作基础
- 第6章 Python 数字图像处理(DIP) - 彩色图像处理1 - RGB彩色模型,RGB to Gray,CMK和CMYK彩色模型,HSI彩色模型
- php 上传图片返回预览,图片上传前的预览(PHP)
- python计算两个矩形的重叠_用Python检查两个矩形是否重叠的程序