Как вертикально выравнивать элемент относительно другого элемента с псевдоклассом?

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

вы можете попробовать это

$(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/ , конечно, вам нужно больше стилей, чтобы добиться того, что вам нужно, но это основной

Answer 3

Демонстрация: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); 


}