如何使用伪类垂直对齐元素相对于其他元素？

Question

我有多个盒子（物品），上面有物品编号和描述。我想垂直对齐我的项目编号，无论描述高度如何（仅使用HTML和CSS）。

有关详细信息，请参阅此图片：

<div class="item">
    <div class="item-number">1</div>
    <div class="item-description">Text placeholder</div>
</div>

如您所见，我有多个方框，描述文字可以有不同的长度，所以我无法将项目编号相对于顶部绝对定位。

任何人都有关于如何实现这一目标的任何建议？

Answer 1

你应该绝对定位你的号码以达到这个目的。您还可以通过使用伪元素来最小化标记，允许您使用单个元素执行此操作。

我还使用了data-attr，以便您可以根据需要动态更改div中的数字。

类似的东西：

div {
  width: 200px;
  border: 5px solid lightgray;
  box-shadow: 5px 5px 10px dimgray;
  margin: 20px;
  padding: 20px;
  padding-left: 30px;
  position: relative;
}
div:before {
  content: attr(data-pointNum);
  position: absolute;
  top: 50%;
  left: -5px;
  box-sizing: border-box;
  height: 40px;
  width: 40px;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  border: 5px solid tomato;
  background: white;
  box-shadow: 5px 5px 10px dimgray;
}

<div data-pointNum="1">some text</div>
<div data-pointNum="2">some moretext
  <br/>spanning multiple
  <br/>lines</div>

Answer 2

演示： http://jsfiddle.net/UI_Designer/xzmzpL4g/1/

.item{
    border:1px solid #000;  
    padding:20px;
    margin-left:20px;
    position:relative;
    margin-bottom:20px;

}
.item-number{
     position: absolute;
    left:-10px;
    width:20px;
    height:20px;
    border:1px solid #ccc;
    border-radius:50%;
    text-align:center;   
    background:#FFF;
    top: 40%;
  transform: translate(-20%,0);


}

Answer 3

你可以试试这个

$(document).ready(function() {
  $('.item-number').css('top', ($('.item').height() / 2) + 'px');
});

.item-description {} .item {
  border: 1px solid #000;
  width: 150px;
  padding-left: 20px;
}
.item-number {
  position: absolute;
  left: 5px;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="item-number">1</div>
  <div class="item-description">Text placeholder Text placeholder Text placeholder Text placeholder</div>
</div>

这是演示 https://jsfiddle.net/0xf5hvej/ 当然，你需要更多的造型来实现你所需要的，但这是基本的