zoukankan      html  css  js  c++  java
  • 使用css让图片居中

    今天做作业遇到一个需要将图片居中的,我直接在img标签里顺手写下了align="center",发现图片并没有居中,这才想起img里的align是和文字的相对位置关系。

    既然html属性用不了,就试试用css吧

    可以使用div将img嵌在里面

    这是给div加上background-color:black的属性,看看div的区域是什么样的

    我发现div高度和内层img高度相同,而宽是布满当前父元素(我的是body的大小),图片居左

    试着把div的款变小一点,居中没问题,使用margin:auto就可以将div居中了。我想这是因为上下自动应该还是默认间距(据观察应该是0,这个说法好像很业余的样子,但是我觉得我理解了),左右auto可以把左右空白区域填满,div就自然居中了。

    只要把div的宽度设为图片的宽度就完美啦

    <style type="text/css">
        div{
          margin:auto;
          width:xxxpx;      
        }
    </style>

     多谢1楼 ☑傻瓜小Yǚ 提醒img默认是行内元素,行内元素水平居中请大家果断无视掉我上面的代码(只是用一个很奇葩的方法实现了一个原本不应该那样实现的形式)

    1 <style type="text/css">
    2     div{
    3         text-align:center;
    4    }
    5 </style>

    行内元素水平居中使用text-align:center就可以了,我之前一直以为text-center只能让文字居中呢

    我就这样积累了一个小技巧,于是就赶紧记下来了

    ps:经测试这种方法在火狐和谷歌浏览器中展现很好,而IE低版本不买账。求解决方法

    学习中ing,大家发现有我的理解有什么问题,欢迎大家指出啦~~一起进步啊~~~

  • 相关阅读:
    docker 安装ELK
    关于centOS安装配置mysql5.6那点事
    关于centOS安装配置xampp那点事
    PowerDesigner16.5连接Oracle数据库生成E-R图
    Microsoft Visual Studio 中工具箱不显示DevExpress控件的解决办法
    Linux 基础命令
    oracle数据库表空间创建&导入&导出
    weblogic10.3.6漏洞修改方案
    oracle数据库表空间追加数据库文件方法
    转移博客
  • 原文地址:https://www.cnblogs.com/piaomiao1314/p/img_center_css.html
Copyright © 2011-2022 走看看