热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

间隔为
  • 标签,显示表格单元格-Spacingin
  • tagswithdisplaytable-cell
  • Ivefourlitagsandtheyallcontainsimagesinit.Now,Iwanttoshowimagesverticallycentera

    I've four li tags and they all contains images in it. Now, I want to show images vertically center and for this I've used display: table-cell for all li and on image I've used vertical-align middle. But margin isn't working when I am trying to put spacing between li's.

    我有四个li标签,里面都有图片。现在,我想要显示垂直中心的图像,为此我使用了display: table-cell表示所有li,在图像上,我使用了垂直居中。但是当我试图在li之间设置间隔时,保证金并没有起作用。

    Here is the JSFiddle

    这是JSFiddle

    HTML

    HTML

    Our Achievements

    CSS

    CSS

    .achievements ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .achievements ul li {
        min-width: 304px;
        min-height: 208px;
        vertical-align: middle;
        display: table-cell;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-shadow: 0px 0px 3px #aaa;
        color: #000;
        margin-right: 14px;
        padding-bottom: 32px;
        max-width: 303px;
        background: #fff;
        font-family:'gafata';
        padding-top: 32px;
        line-height: 23px;
        text-align:center;
    }
    .achievements ul li img {
        vertical-align: middle;
    }
    

    1 个解决方案

    #1


    8  

    Use border-spacing to add spacing between the cells.

    使用边框间距来增加单元格之间的间距。

    In order for this to have an effect on the table, the border-collapse value should be separate (the default value) as opposed to collapse.

    为了使其对表产生影响,边界崩溃值应该是独立的(默认值),而不是崩溃。

    Updated Example

    更新的例子

    .achievements ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display:table;
        border-spacing: 10px;
        border-collapse: separate;
    }
    

    If you want to center the table, simply add margin:0 auto. (example)

    如果要将表居中,只需添加margin:0 auto。(例子)


    推荐阅读
    • 使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能 ... [详细]
    • 网站访问全流程解析
      本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
    • 可转债数据智能抓取与分析平台优化
      本项目旨在优化可转债数据的智能抓取与分析平台。通过爬取集思录上的可转债信息(排除已发布赎回的债券),并结合安道全教授提出的三条安全线投资策略,新增了建仓线、加仓线和重仓线,以提供更精准的投资建议。 ... [详细]
    • 本文介绍了如何利用摄像头捕捉图像,并将捕获的图像数据保存为文件。通过详细的代码示例,展示了摄像头调用的具体实现方法,适用于多种应用场景,如安全监控、图像处理等。 ... [详细]
    • CSS3 实现鼠标悬停时滚动菜单的流畅过渡效果 ... [详细]
    • 不知道有没有人遇到过这种为题,如下代码 ... [详细]
    • 前端实用的CSS3技巧有哪些
      本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]
    • http:js.alixixi.coma2014021292298.shtmlhttp:w3cshare.comexample?pid134http:w3cshare.comc ... [详细]
    • 在DIV内垂直居中UL - Centering Vertically an UL inside a DIV
      iamtryingtomakeanavigationmenuinsidea200pxx200pxsquare,thisnavigationlist(UL)chang ... [详细]
    • 解决Bootstrap DataTable Ajax请求重复问题
      在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
    • 第二十五天接口、多态
      1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
    • 解决Parallels Desktop错误15265的方法
      本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]
    • 使用Jsoup解析并遍历HTML文档时,该库能够高效地生成一个清晰、规范的解析树,即使源HTML文档存在格式问题。Jsoup具备强大的容错能力,能够处理多种异常情况,如未闭合的标签等,确保解析结果的准确性和完整性。 ... [详细]
    • 【Python爬虫实操】 不创作小说,专精网站内容迁移,超高效!(含源代码)
      本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移,涵盖前端、后端及Android相关知识点。通过具体实例和源代码,展示了如何精准抓取并迁移网站内容,适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]
    • HTML5大文件传输技术深度解析与实践分享
      本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析,详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题,并提供了可供参考的代码示例和解决方案。此外,文章还讨论了常见的技术挑战及优化策略,旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]
    author-avatar
    Hydhuyfh________
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有