如何使用伪类垂直对齐元素相对于其他元素？ [复制]答案

【问题标题】：How to vertical align element relative other element with pseudo-class? [duplicate]如何使用伪类垂直对齐元素相对于其他元素？ [复制]
【发布时间】：2015-05-07 20:07:08
【问题描述】：

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

查看此图片了解更多信息：

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

如您所见，我有多个框，并且描述文本可以有不同的长度，所以我不能绝对定位我的项目编号相对于顶部。

有人对如何实现这一点有任何建议吗？

【问题讨论】：

标签： css

【解决方案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>

【讨论】：

【解决方案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);


}

【讨论】：

如果描述只有一行，则此行对齐不正确。

【解决方案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/ 当然你需要更多的样式来实现你所需要的，但这是基本的

【讨论】：

对于这个功能，jQuery 太过分了。
不要发布针对 CSS 问题的 JavaScript 解决方案，除非您绝对 100% 肯定没有纯 CSS 解决方案。