程序员经验分享-hwhale

垂直对齐多个不同高度的图像

2023-12-09

我有一个轮播脚本，它显示我正在处理的网站的所有用户。该轮播显示用户的头像。 我尝试垂直对齐头像，但我无法正确对齐......

我还在互联网上检查了其他主题（例如http://codepen.io/chriscoyier/pen/oJeAK），但没有什么真正符合我的需求......

这是我的 CSS 代码：

#author-sorter {
    padding: 20px 30px;
    margin-right: 2px;
    width:900px;
}
#author-sorter > * {
    vertical-align: middle;
}
#author-sorter ul li {
    float: left;
}
#author-sorter ul li a {
    width: 48px;
    height:48px
}
#author-sorter ul li a:hover img, #author-sorter ul li.now a img {
    border: 1px solid #bcd001;
    width: 48px;
}
#author-sorter ul li.now {
    position:relative;
}

我在这里做了一个现场版本：http://jsfiddle.net/ev2wD/

有小费吗 ？


干得好。

工作演示

HTML：

<div id="author-sorter">
    <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
        <div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;">
            <ul class="pagination jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding:  0px; width: 902px; display:table-row;">
                <li class="now jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="width: 82px;" jcarouselindex="1"><a href="?author_id=43" id="43"><img width="46" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="Alterre Bourgogne" src="http://rare.lfdb.fr/files/2013/08/Alterre_logo.gif"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="2"><a href="?author_id=51" id="51"><img width="48" height="15" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARPE PACA" src="http://rare.lfdb.fr/files/2013/08/Logo_ARPE-PACA_2010_BD-150x49.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="3"><a href="?author_id=50" id="50"><img width="48" height="29" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="AREC Poitou-Charentes" src="http://rare.lfdb.fr/files/2013/08/AREC_logo-150x91.gif"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="4"><a href="?author_id=47" id="47"><img width="48" height="38" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="AREHN" src="http://rare.lfdb.fr/files/2013/08/Arehn_logo.gif"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="5"><a href="?author_id=48" id="48"><img width="48" height="32" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARENE Ile-de-France" src="http://rare.lfdb.fr/files/2013/08/ARENE_logo2009-150x102.gif"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="6"><a href="?author_id=52" id="52"><img width="48" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARER" src="http://rare.lfdb.fr/files/2013/08/Logo-arer-150x150.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="7"><a href="?author_id=44" id="44"><img width="48" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARPE Midi-Pyrénées" src="http://rare.lfdb.fr/files/2013/08/ARPE_logosimple-150x150.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="8"><a href="?author_id=49" id="49"><img width="48" height="31" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="CERDD" src="http://rare.lfdb.fr/files/2013/08/CERDD_Logo2004.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-9 jcarousel-item-9-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="9"><a href="?author_id=46" id="46"><img width="31" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="OEC" src="http://rare.lfdb.fr/files/2013/08/OEC-98x150.jpeg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-10 jcarousel-item-10-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="10"><a href="?author_id=53" id="53"><img width="48" height="24" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="RAEE" src="http://rare.lfdb.fr/files/2013/08/RAEE_logo.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-11 jcarousel-item-11-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="11"><a href="?author_id=45" id="45"><img width="48" height="27" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="RARE" src="http://rare.lfdb.fr/files/2013/08/LogoRARE-e1377163403654.png"><span class="arrow"></span></a>

                </li>
            </ul>
        </div>
        <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div>
        <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
    </div>
</div>

The CSS:

#author-sorter {
    padding: 20px 30px;
    margin-right: 2px;
    width:900px;
}
#author-sorter > * {
    vertical-align: middle;
}
#author-sorter ul li {
    float: left;
}
#author-sorter ul li a {
    width: 48px;
    height:48px;
    display: table-cell;
vertical-align: middle;
}
#author-sorter ul li a:hover img, #author-sorter ul li.now a img {
    border: 1px solid #bcd001;
    width: 48px;
}
#author-sorter ul li.now {
    position:relative;
    vertical-align: middle;
display: table-cell;
}

希望这可以帮助。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

verticalalignment

垂直对齐多个不同高度的图像 的相关文章

  • 使用 CSS 选择器和 BeautifulSoup 获取属性值

    我正在抓取网页Python并使用BeutifulSoup library I have HTML像这样的标记 tr class deals span class hotel name a href www example2 com a sp

  • Bootstrap 3 列列排序

    Bootstrap 3 2 1 排序 三列排序问题 尝试在小屏幕上订购三列 如下图所示 In medium screen it should be like above image but ordering is not working i

  • CSS 字体显示功能是什么？

    对于我的网站 我从 Google 的 PageSpeed Insights 获得以下反馈 利用字体显示 CSS 功能确保加载 Web 字体时文本对用户可见 这意味着什么 CSS font display允许您控制网络字体在加载时 加载后如何

  • 有什么解决方案可以删除 Firefox 上的清除按钮 吗？

    我尝试禁用隐藏清除按钮 但没有成功Firefox But on Chrome Edge Safari效果很好 知道为什么吗 有解决办法吗 以下是CSS input type time webkit clear button display

  • 如何制作可扩展的文本框？

    我想制作一本以给定宽度 高度开始的教科书 然后 如果用户输入的内容超过给定的空间量 文本框就会向下扩展 我该怎么做呢 我使用 CSS 吗 当用户超过允许的行数时 基本文本框仅显示滚动条 如何使文本框将行数再扩展 5 行

  • Chrome扩展程序自定义光标

    我构建了一个 Google Chrome 扩展程序 在网站中放置一些 IMG 标签 hover 上的此 img 标记必须显示自定义光标 该扩展使用 jQuery 作为其注入的核心脚本 我尝试了以下方法 1 var cursor url ch

  • 带有透明边框的响应式箭头进度条

    我正在尝试构建一个进度条 如结帐中常见的那样 问题是 箭头之间的边界是透明的 整个事情应该是反应灵敏 到目前为止我已经明白了 http codepen io MrBamblele pen rVBeoz http codepen io MrB

  • -webkit-overflow-scrolling：触摸；无效的属性值

    我不明白为什么这不起作用 我把它放在我的 html 和正文中 它仍然显示无效的属性值并被划掉 我首先尝试在媒体查询中使用它 但它在那里不起作用 有谁知道它对我不起作用的潜在原因 谢谢你 html body width 100 height

  • jquery - 如何根据我的滚动位置滚动顶部动画到下一个可见的 div/类？

    如果标题有点模糊 请原谅我 因为我不知道如何写下来 基本上 我们有一个包含 6 个 场景 的页面 他们都有班级 scene和不同的 ID 例如 scene1 scene2 etc 首先 我们必须动态更改每个场景的颜色 gt 场景 1 是浅色

  • 角 2 材料容器固定不工作

    我对 CSS 和 Angular 2 材质有疑问 任何固定定位元素的行为都不像固定在 md sidenav container 内 如果它不在容器内 则它可以正常工作 这是该问题的链接 只需将 md toolbar 复制并粘贴到容器内部 您

  • 使用 css3 列 - 如何获取元素位置？

    为了将长 html 文件与列分开 我使用了 css3 列 padding 0px height 1024px webkit column gap 0px webkit column width 768px 我想获取指定元素的位置 所以我使用

  • 使整个网页着色

    How I can take any given webpage and make everything look tinted a certain color Basically if you take google and tint i

  • Javascript显示/隐藏div onclick

    我有一个页面 其中包含三个 div 每个 div 是一个段落 我想使用 javascript 在用户从导航栏中按下每个 div 时仅在页面中显示这是导航栏 https i stack imgur com 1LnsS png WebDev 只

  • 平板电脑在第一次单击时悬停，在第二次单击时单击

    发布这个问题主要是希望证实我对该行为的怀疑 从而为其他程序员记录下来 因为我在网上没有找到任何记录 我正在构建一个网站 其导航栏具有以下属性 水平截面是 ul of li 和一些 li li s 两者都有 A n a 元素带您进入该主题 触

  • 是否可以使用 Chrome 开发者工具审核多个页面？

    我试图找出我的网站中未使用的 CSS 类 然后我发现 Chrome 开发者工具中有一个审核功能 可以标记未使用的 CSS 类 但是 它一次只能执行一页 有没有办法让它审核多个页面 以便我可以找出所有页面中未使用的 CSS 类 我知道有一个

  • Twitter Bootstrap 按钮的水平和垂直分离

    是什么导致 Twitter Bootstrap 的按钮水平分离 我在 CSS 代码中找不到它 我试图对垂直方向重复相同的操作 但似乎我未能实现这一目标 如何在按钮之间添加垂直分隔 仅当它们垂直堆叠时 第二张图片 但当它们不是 第一张图片 时

  • 垂直对齐材质图标

    我正在尝试在导航菜单中垂直对齐 下拉箭头 我尝试过各种方法 例如vertical align middle display inline block 之类的东西 但这根本没有帮助 http img02 imgland net jfCmDoW

  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个

  • LESS CSS 在媒体查询中设置变量？

    我正在开发一个专门针对 iPad 的网站 为了使我的网站能够在视网膜显示屏 iPad 和旧版本 iPad 上运行 我想在媒体查询中的 LESS CSS 中设置一个变量 例如 media all and max width 768px rat

  • 禁用 iframe 中的滚动

    有没有办法在 iframe 中禁用所有滚动 我有一个 iframe 其中内容超出了 iframe 尺寸 设置scrolling no 只会删除滚动条 但不会禁用滚动 我无法控制 iframe html 的头部 所以我无法设计它的样式 有任何

随机推荐

  • pthread_create 并传递一个整数作为最后一个参数

    我有以下功能 void foo void i int a int i int main pthread t thread int i pthread create thread 0 foo void i 编译时 存在一些关于转换的错误 vo

  • 部署到 IIS 7 时诊断跟踪日志记录不起作用

    我正在将站点从 IIS 6 迁移到 IIS 7 但无法查看所有日志 我的system diagnostics配置如下

  • Java JTextPane + JScrollPane：取消/激活自动滚动

    我目前正在用 Java 编写一个简单的聊天 目前我陷入了这个问题 我希望我的输出 JTextPane 的行为就像您期望它从良好的聊天中获得的那样 即默认情况下 当新文本到达时文本会自动滚动 使用 outputfield setCaretPo

  • 如何在 Spark 中向分解结构添加列？

    假设我有以下数据 id 1 payload foo 1 lol 2 foo 2 lol 2 我想分解有效负载并向其中添加一列 如下所示 df df select id F explode payload alias data df df w

  • Codeigniter AOP [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我需要 Codeigniter PHP 框架的 AOP 范例的良好实现 你有什么建议我 面向方面的编程在 PHP 世界中还不是很普遍 我不确定 CI

  • 在 C# 中重用 HttpWebRequest 的连接

    我需要使用 Net 发出 POST 请求 我可以通过 GET 进行身份验证 因此我尝试在同一连接上发出 POST 请求以保持身份验证 问题是我收到 401 Not Authenticated 异常 这意味着连接尚未被重用 HttpWebRe

  • 在 Node js 8 中打印 libuv 线程池大小

    这个链接纯粹指定libuv提供一个线程池 可用于运行用户代码并在循环线程中获得通知 它的默认大小是 4 但是可以在启动时通过设置来更改它UV THREADPOOL SIZE环境变量为任意值 绝对最大值为 128 So in package

  • 在屏幕右下角打开 Chrome 应用程序窗口

    我希望我的 Chrome 应用程序能够打开 使其接触任务栏并恰好偏离屏幕右侧 我当前的代码 chrome app runtime onLaunched addListener function chrome app window creat

  • C编程动态初始化二维数组

    我在这里做了一些愚蠢的事情 但我无法确切地指出是什么 void init data double data int dim x int dim y int i j k data double malloc sizeof double dim

  • 为什么seaborn计数图和直方图以不同的方式显示相同的十六进制颜色？

    我试图在我的论文中保留单一的调色板 我注意到我的直方图的蓝色和我的计数图的蓝色色调略有不同 即使我将它们设置为完全相同的十六进制值 我是否缺少一个设置 或者这些不同的图不仅仅显示给定的十六进制 我尝试过使用计数图饱和度 但它与颜色不匹配 理

  • 在 Git 中编写一个预推送挂钩来 grep 正则表达式的所有文件，如果未找到正则表达式，则希望拒绝推送

    我有以下预推钩 理想情况下 我希望它遍历所有推送到我的存储库的文件 如果任何文件的内容与顶部定义的正则表达式不匹配 则拒绝推送 尝试循环访问文件时出现以下错误 未定义方法 each for String NoMethodError each

  • 共享首选项或 SQlite

    我正在开发一个 Android AppWidget 它显示从配置活动输入的简短文本 在存储数据时我有点困惑 我应该使用共享首选项还是 SQlite 数据库 Thanks 这完全取决于您想要存储的数据 共享偏好 小数据 非结构化 例如登录信息

  • 将参数传递给同步过程调用

    创建线程对象时 我想从应用程序中调用需要同步的代码 问题是我不知道怎么打电话Synchronize对于带有参数的应用程序函数 说我们有 procedure ThreadObject Execute var val1 val2 integer

  • 创建嵌入式mysql数据库

    如何创建嵌入式mysql数据库与 C 定义 嵌入式 如果您尝试在未安装 MySQL 的情况下使用 MySQL 那么您就不走运了 SQLite 和 SQL Server Compact Edition 请参阅 Matthew 的链接 是您在不

  • 如何使同一项目中的另一个类可以访问变量？

    我有一个变量 PrincipleIndex 在一个班级 Principles cs 在一个 C 项目中 Bullseye Biz Logic Trading Principle Data Principles cs int Principl

  • mlpy - 动态时间扭曲取决于 x？

    I am trying to get the distance between these two arrays shown below by DTW 我正在使用Pythonmlpy提供的套餐 dist cost path mlpy dtw

  • 绘制根节点位于顶部的树状图

    我有以下玩具图 例如代表论坛主题 import igraph as ig g ig Graph n 12 directed True g add edges 1 0 2 1 3 2 4 3 5 1 6 2 7 6 8 7 9 0 10 0

  • 在 iPhone 上，如何使 URL 显示 App Store 中的条目？

    例如 如果有人在 iPhone 上查看某个应用程序的 URL 我们希望该 URL 能够打开 App Store 并显示与该应用程序相关的条目 这个想法是允许在 iPhone 上单击两次 单击链接 然后单击 安装 按钮 即可下载应用程序 这怎

  • 无法在 Mac Mojave 上将任何 C 程序与 gcc 链接

    我刚刚更新到 OSX 10 14 6 Mojave 现在 在升级 Xcode 并迁移 MacPorts 后 即使是最简单的 C 程序也不会与任何 gcc 版本链接 例如 链接程序 int main gives dcs16 gt gcc te

  • 垂直对齐多个不同高度的图像

    我有一个轮播脚本 它显示我正在处理的网站的所有用户 该轮播显示用户的头像 我尝试垂直对齐头像 但我无法正确对齐 我还在互联网上检查了其他主题 例如http codepen io chriscoyier pen oJeAK 但没有什么真正符合

热门标签