垂直对齐多个不同高度的图像 [英] Vertical align multiple image with different height
本文介绍了垂直对齐多个不同高度的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我得到了一个 Carroussel 脚本，它显示了我正在处理的站点的所有用户.该旋转木马显示用户的头像.我尝试垂直对齐头像，但我无法正确对齐...
我还在互联网上查看了其他主题(例如 http://codepen.io/chriscoyier/pen/oJeAK) ，但没有什么能真正满足我的需求......
这是我的 CSS 代码:
#author-sorter {填充:20px 30px；右边距:2px；宽度:900px；}#author-sorter >* {垂直对齐:中间；}#author-sorter ul li {向左飘浮;}#author-sorter ul li a {宽度:48px；高度:48px}#author-sorter ul li a:hover img, #author-sorter ul li.now a img {边框:1px 实心 #bcd001;宽度:48px；}#author-sorter ul li.now {位置:相对；}我在这里做了一个实时版本:http://jsfiddle.net/ev2wD/
有什么提示吗?
解决方案
给你.
HTML:
<div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
CSS:
#author-sorter {填充:20px 30px；右边距:2px；宽度:900px；}#author-sorter >* {垂直对齐:中间；}#author-sorter ul li {向左飘浮;}#author-sorter ul li a {宽度:48px；高度:48px；显示:表格单元格；垂直对齐:中间；}#author-sorter ul li a:hover img, #author-sorter ul li.now a img {边框:1px 实心 #bcd001;宽度:48px；}#author-sorter ul li.now {位置:相对；垂直对齐:中间；显示:表格单元格；}希望这会有所帮助.
I got a Carroussel script which display all the users of the site i'm working on. This carroussel displays the avatar of the users. I try to align verticaly the avatar's but i can't get it right...
I also check the other subject on the internet (like http://codepen.io/chriscoyier/pen/oJeAK) , but nothing really match my needs...
Here is my CSS code :
#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;
}
I made a live version here : http://jsfiddle.net/ev2wD/
Any tips ?
解决方案
Here you go.
The 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;
}
Hope this helps.
这篇关于垂直对齐多个不同高度的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
