フレックスボックスでリストのリストインデックスを垂直に整列する方法は？

Question

カスタムリストインデックス（）のリストを作成する必要がありました。これはリストアイテムのコンテンツに垂直に中央に配置されています。

私はすでにフレックスを使用していますとして、私は、最も簡単には、リスト項目にdisplay:flex;を与え、それをスタイルするかもしれないと思いました。これは動作しますが、リスト項目は、他の要素が含まれているとすぐに、それはを台無しにされています。できるだけ早く下記の例を参照してください。

いただきまし垂直リストのインデックスを中央するための最良の方法？

- 更新例 -

ol { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
} 
 

 
ol > li { 
 
    display: flex; 
 
    margin-top: 20px; 
 
    align-items: center; 
 
} 
 

 
ol > li:before { 
 
    color: red; 
 
    content: attr(data-count)' ›'; 
 
    flex display: block; 
 
    flex-shrink: 0; 
 
    text-align: right; 
 
    min-width: 24px; 
 
    padding-right: 5px; 
 
}

<ol> 
 
    <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> 
 
    <li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ol>

Answer 1

ソリューションは、この特定の場合には、代わりにフレックスの、display:tableを使用することができます。

ol { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
    display:table; 
 
    border-spacing:0 20px; 
 
} 
 

 
ol > li { 
 
    display:table-row; 
 
    vertical-align:middle;  
 
} 
 

 
ol > li:before { 
 
    color: red; 
 
    content: attr(data-count)' ›'; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    text-align: right; 
 
    white-space: nowrap; 
 
    padding-right: 10px; 
 
}

<ol> 
 
    <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> 
 
    <li data-count="999 99">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ol>

Answer 2

ここ垂直中心矢印を維持する絶対位置と方法です。

ol { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
} 
 

 
ol > li { 
 
    margin: 20px 0 0; 
 
    padding-left: 36px; 
 
    position: relative; 
 
} 
 

 
ol > li:before { 
 
    color: red; 
 
    content: attr(data-count)' ›'; 
 

 
    font-size: 14px; 
 
    line-height: 1; 
 
    
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; /* vertically center */ 
 
    margin-top: -7px; /* and shift up based on 16px height */ 
 
}

<ol> 
 
    <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> 
 
    <li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ol>

Answer 3

私は最良の選択肢は一つの他の要素にli内のすべての要素をラップすることであり、それが問題を解決すべきだと思います。

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
} 
 
ul > li { 
 
    display: flex; 
 
    margin-top: 20px; 
 
    align-items: center; 
 
} 
 
ul > li:before { 
 
    color: red; 
 
    content: '›'; 
 
    flex display: block; 
 
    flex-shrink: 0; 
 
    text-align: center; 
 
    width: 30px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li> 
 
    <p>Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</p> 
 
    </li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ul>