Question

嗨我正试图垂直居中一些李但是当我放置一个边界顶部和边界底部时，它不再起作用了。我试图在任何地方改变100的值（越来越少，组合，...），但我不能让它工作

全部谢谢

HTML：

<div>
    <ul>
        <li><img src="http://dummyimage.com/50x50/000/fff.png&text=tester" /> Some text</li>
        <li> Some text</li>
        <li>333</li>
    </ul>
</div>

CSS：

    ul li {
    display: inline;
    height: 100px;
    line-height: 100px;
    border: 1px solid #ff0000;
    }

    ul li img {
        vertical-align: middle;
    }

    div {
    height: 100px;
    background-color: yellow;
    border-top: 1px solid #444444;
    border-bottom: 1px solid #444444;
   }

https://jsfiddle.net/pgyakeu3/

Answer 1

高度不适用于bool isInsideCircle(double x, double y) { // The mouse is inside if the distance to the center of the circle // is less than the radius return std::sqrt((x - c.x)*(x - c.x) + (y - c.y)*(y - c.y)) < r; }元素。您应该inline s li。此外，您应该覆盖浏览器默认值的margin，padding等。

Updated fiddle

Answer 2

不确定您要实现的目标是什么？是这样的吗？ https://jsfiddle.net/pgyakeu3/2/

由于您确切知道元素的高度值，因此可以通过以下方式完成：

ul {
  height: 100px;
  margin-top: 25px;
}
ul li {
  display: inline;
  border: 1px solid #ff0000;
}
ul li img {
  vertical-align: middle;
}
div {
  height:100px;
  background-color:yellow;
  border-top:1px solid #444444;
  border-bottom:1px solid #444444;
}

Answer 3

ul li {
display: block;
height: 100px;
line-height: 100px;
border: 1px solid #ff0000;
text-align :center;
}

https://jsfiddle.net/kartik_bhalala/89amryhw/

css vertical align li和div的边框

3 个答案: