html如何让图片与低端平齐,CSS入门知识-图片水平对齐技巧
CSS入门知识-图片水平对齐技巧
在CSS中,图片怎么水平对齐,有哪些技巧呢?我们一起来学习一下吧!
一、图片水平对齐text-align
在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住,text-align一般只用在两个地方:文本水平对齐和图片水平对齐。也就是说,text-align只对文本和img标签有效,对其他标签无效。
语法:
text-align:属性值;
说明:
text-align属性取值如下表:
表1 text-align属性
图片水平对齐
p
{
width:300px;
height:80px;
border:1px solid gray;
}
.p_img1{text-align:left;}
.p_img2{text-align:center;}
.p_img3{text-align:right;}
img{width:60px;height:60px;}
在浏览器预览效果如下:
分析:
很多人都以为设置图片水平对齐是在img标签设置,其实这是错误的'。大家记住,图片是要在父元素中进行水平对齐的。在这个例子中,img元素的父元素是p,img元素是相对于p元素进行水平对齐的。因此要想对图片进行水平对齐,就要在父元素(p元素)中设置text-align属性。
【CSS入门知识-图片水平对齐技巧】相关文章:
html如何让图片与低端平齐,CSS入门知识-图片水平对齐技巧相关推荐
- php图片滑动的属性,使用css怎么实现图片的滑动效果?(示例)
本篇文章主要给大家介绍关于css实现图片的滑动效果示例,希望大家阅读完本篇后对css滑动效果的相关知识有所了解. 下面给大家举一个简单的css图片滑动效果示例(自下而上滑动): css怎么实现图片滑动 ...
- 怎么让图片居中php,怎么让CSS文件里图片居中
让CSS文件里图片居中的方法:首先创建一个HTML示例文件:然后引入一张背景图片:最后通过css中的"background-position"属性实现图片居中即可. 本文操作环境: ...
- html中如何使图片自动旋转90度,css怎么让图片旋转90度?
css怎么让图片旋转90度?下面本篇文章给大家介绍一下使用CSS让图片旋转90度的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让图片旋转90度? 在CSS中,可以 ...
- html img图片不平铺,如何在css中设置图片不平铺
如何在css中设置图片不平铺 发布时间:2021-04-29 15:39:28 来源:亿速云 阅读:80 作者:Leah 这篇文章将为大家详细讲解有关如何在css中设置图片不平铺,文章内容质量较高,因 ...
- div图片背景虚化不影响图片上的文字_HTML+CSS入门 如何实现背景图片虚化效果
本篇教程介绍了HTML+CSS入门 如何实现背景图片虚化效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 需求:一个div设置了background: url,现在需要 ...
- 图片阴影效果怎么设置html,css如何给图片加阴影?
css可以实现很多的图片效果,图片阴影效果就是其中之一,那么css如何给图片添加阴影效果?本篇文章就给大家介绍如何使用css给图片添加阴影,希望对你们有所助. 方法1:设置box-shadow属性 通 ...
- 最全CSS基础知识图片形式整理
文章目录 一.HTML5基础 -- H5标签 二.CSS基础 三.CSS核心属性 四.css盒模型和文本溢出 五.CSS元素类型 六.定位.锚点.透明 七.图片整合 八.宽高自适应 九.浏览器兼容 十 ...
- html 图片透明字不透明,CSS实现背景图片透明,文字不透明效果的两种方法
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
- html图片定位坐标原点,利用CSS定位背景图片的常用方法总结
前言 大家在网上最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混 ...
最新文章
- 《穿越计算机的迷雾》读书笔记三
- Ubuntu 18.04 如何添加或删除 SWAP 交换分区
- 中国活性炭行业市场全景调研分析及需求趋势预测报告2022-2028年
- 使用mac m1跑fortran代码hello world
- BlueStore——先进的用户态文件系统《一》
- HDFS报错:there are 15871 missing blocks,the following files may be corrupted
- Project Pacific的第一次接触(转)
- 阿里云mysql读写分离实现_MySQL-Proxy实现MySQL读写分离
- JQuery超链接鼠标提示效果
- java 视频比特率_java – 为MediaCodec设置的有效比特率是多少
- python绘制彩色地震剖面断层解释_地震剖面上的断层分析及相关意义
- Hibernate框架检索策略
- 山西藏家捐献44幅明清寺观壁画在山西博物院展出(图)
- 论文书写之如何引用参考文献(简单明了)
- Vulnhub_MoneyBox
- [转载]用树莓派3配置成无线路由器
- 使用metasploit破解ssh密码
- 计算机及处理器温度要求国标,【国家标准】GB 4967-1995电子计算器通用技术条件.pdf...
- 参加培训的小盆友进步了
- CodeChef MONOPLOY Gangsters of Treeland