Question

我有以下代码，如果选择了当前页面，则会打印img。我的问题是如果列表项是一个不同的高度我不能将它放在最右边的列表项的中间...

<li><?php echo $child->link($child->title); ?><?php echo (url_start_with($child->url) ? '<img src="images/ico-arrow.png" class="pointer">': null); ?></li>

我怎么能修改“TOP”，这样无论使用css的高度如何，它都会垂直定位

#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; }

Answer 1

您可以使用

对齐块级元素

margin-top: auto;
margin-bottom: auto;
height: 16px;

这应该垂直居中你的图像。（用你自己的身高替换身高）。

或者，您可以将父元素的vertical-align属性设置为居中。

Answer 2

我设法解决了......

关键是确保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; }

在列表项的中间右侧放置一个图标

2 个答案: