Css设置img属性让图片水平居中/居左/居右的写法

  发布时间:2014-01-29 10:40:16   作者:佚名   我要评论
图片的居中显示css有很多方法,但在很多情况下有的方法无效,无意发现这个系统的官方处理图片居中,居左,居右的css写法,喜欢的朋友可以收藏下哦

图片的居中显示css有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,在研究wordprss程序的时候,无意发现这个系统的官方处理图片居中,居左,居右的css写法,分享一下!

比如一个图片的<img class=”alignleft “>,居左,设置图片的img属性左浮动;居右,设置右浮动;水平居中,设置margin:auto。后来一想,这个办法很不错,应该是一个在很多情况下都有效的方法!

一般设置图片属性text-align:centre水平居中,但这个方法经常无效,以后还是采用以下写法吧!

复制代码
代码如下:

/* Alignment */
.alignleft {
display: inline;
float: left;
}
.alignright {
display: inline;
float: right;
}
.aligncenter {
clear: both;
display: block;
margin:auto;
}

相关文章

  • CSS实现五种常用的2D转换

    CSS 中的2D转换允许我们在二维空间中执行一些基本的变换操作,例如移动、旋转、缩放或扭曲等,本文主要介绍了CSS常用的五个变换:translate()、rotate()、scale()、skew()
    2021-11-30
  • CSS巧用渐变实现高级感背景光动画

    本文主要介绍了利用CSS中的conic-gradient()以及box-shadow模拟出光源阴影效果,从而实现一个充满高级感的背景光动画,感兴趣的小伙伴可以跟随小编一起学习一下
    2021-11-30
  • CSS中妙用 drop-shadow 实现线条光影效果

    本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中,需要的朋友
    2021-11-08
  • 仅仅使用 HTML/CSS 实现各类进度条的方式汇总

    这篇文章主要介绍了仅仅使用 HTML/CSS 实现各类进度条的方式汇总,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-08
  • 纯 CSS 自定义多行省略的问题(从原理到实现)

    这篇文章主要介绍了纯 CSS 自定义多行省略的问题(从原理到实现),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-08
  • CSS作用域(样式分割)的使用汇总

    scoped 属性是 HTML5 中的新属性,是一个布尔属性,如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素,本文给大家介绍CSS作用域(样式分割)的使用汇总,感
    2021-11-03
  • 使用CSS实现小三角边框原理解析

    本文给大家介绍如何把三角画出来,基于css代码实现小三角边框原理解析,感兴趣的朋友跟随小编一起看看吧
    2021-11-03
  • CSS实现切角+边框+投影+内容背景色渐变效果

    这篇文章主要介绍了CSS实现切角+边框+投影+内容背景色渐变效果,单纯用css实现切角+边框+投影+内容背景色渐变所有效果,因为UI没给背景切图,寻思这个理论上用css就能实现
    2021-10-27
  • 纯CSS如何禁止用户复制网页的内容

    本文主要介绍了纯CSS如何禁止用户复制网页的内容,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-26
  • CSS实现单选折叠菜单功能

    今天教大家用纯css实现一个单选的折叠菜单,不需要JavaScript就能用。折叠菜单和标签页差不多,逻辑上都是一种单选面板,只不过折叠菜单一般是垂直堆叠的,标签页是横着排
    2021-10-26

最新评论