如何对列表中垂直对齐的图像进行编号

Question

我的图像按数字顺序排列。分配的编号在图像上方。

       <ol style="text-align:center;">
            <hr>
            1
            <hr>
            <img src="https://via.placeholder.com/300x300" alt="image1" width="30%" height="30%">
            <hr>
            2
            <hr>
            <img src="https://via.placeholder.com/300x300" alt="image2" width="30%" height="30%">
            <hr>
            3
            <hr>
            <img src="https://via.placeholder.com/300x300" alt="image3" width="30%" height="30%">
            <hr>
            4
            <hr>
            <img src="https://via.placeholder.com/300x300" alt="image4" width="30%" height="30%">
            <hr>
            5
            <hr>
            <img src="https://via.placeholder.com/300x300" alt="image5" width="30%" height="30%">
        </ol>

但是，当我将图像放入列表中时，数字在图像的左下方。如何使用列表产生初始结果？

Answer 1

你可以做到

ol {
    list-style-position: inside;
    padding-left: inherit;  
}
    ol > li::before {
        content: "\A";
        white-space: pre;
    }

How to center ordered list number in HTML