Css 将图标放在右边的列表项目中间
我有下面的代码,如果选择了当前页面,它将打印一个img。我的问题是,如果列表项是不同的高度,我不能把它放在最右边的列表项的中间……/P>Css 将图标放在右边的列表项目中间,css,css-selectors,Css,Css Selectors,我有下面的代码,如果选择了当前页面,它将打印一个img。我的问题是,如果列表项是不同的高度,我不能把它放在最右边的列表项的中间……/P> <li><?php echo $child->link($child->title); ?><?php echo (url_start_with($child->url) ? '<img src="images/ico-arrow.png" class="pointer">': null); ?>
<li><?php echo $child->link($child->title); ?><?php echo (url_start_with($child->url) ? '<img src="images/ico-arrow.png" class="pointer">': null); ?></li>
可以使用对齐块级图元
margin-top: auto;
margin-bottom: auto;
height: 16px;
这应该垂直居中你的形象。(将高度替换为您自己的高度)
或者,您可以将父元素的“垂直对齐”属性设置为“居中”。我设法解决了这个问题 关键是确保li的高度为100%。然后添加图像高度一半的负边距,使其垂直对齐,并将其放置在顶部:50%的位置 然后,上述代码更改为:
#bf-fest-list li { margin:0; padding:5px 25px; position:relative; }
#bf-fest-list li a:hover { color:#ec1c23; text-decoration:none; }
#bf-fest-list li.current { background:#a0a1a4; padding:10px 25px; }
#bf-fest-list li.current a { color:#FFF; }
#bf-fest-list li .pointer { position:absolute; top:10px; left:233px; }
将css设置为:
margin:0px auto代码>问题是我不知道列表项的高度是多少,因为它不同。。。
#bf-fest-list li { margin:0; padding:5px 25px; position:relative; }
#bf-fest-list li a:hover { color:#ec1c23; text-decoration:none; }
#bf-fest-list li.current { background:#a0a1a4; padding:10px 25px; }
#bf-fest-list li.current a { color:#FFF; }
#bf-fest-list li .pointer { position:absolute; top:10px; left:233px; }