html - SASS - 垂直居中时间轴内容

Question

我是前端开发新手，我正在使用 sass。我有自己的自定义时间线，我需要帮助将位置与年份和时间线标记对齐。我还想将图片描述放在图片的右侧。

这是我的 jsfiddle 的链接

https://jsfiddle.net/g99Lmsaz/

这是我的sass 代码

$purple: #AF80ED;
        $gray: #f2f2f2;
        $white: #ffffff;
        $timeline-gray: #dddddd;

        .event {
            background: $purple;
            display: table;
            width: 100%;
            margin: 0 auto;
        }

        .event-2 {
            background: $gray;
            display: table;
            width: 100%;
        }

        time {
            /*float: left;
            position: absolute;
            top: 40%;*/
            display: table-cell;
            width: auto;
            text-align: center;
            vertical-align: middle;
            width: 25%;
        }

        .timeline ul li {
          list-style-type: none;
          position: relative;
          width: 6px;
          /*left: 10%;
          margin: 0 auto;*/
          padding: 10px 0 10px 0;
          background: $timeline-gray;

          .content {
            position: relative;
            left: 20px;
            max-width: 700px;
            top: calc(100% / 2 - 10px);

            img{
                border-radius: 50%;
                height: 20px;
                width: 20px;    
            }

          }
        }

        .timeline ul li::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 15px;
          height: 15px;
          border: 4px solid $timeline-gray;
          border-radius: 50%;
          background: $white;
          top: calc(100% / 2 - 10px);
        }

html 代码

<section class="timeline">
                  <ul>
                    <div class='event'>
                        <time>1934</time>
                        <li>
                          <div class='content'>
                                <p>
                                Paris
                                </p>

                                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg/240px-Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg" >

                                <p> 
                                    Eiffel Tower
                                </p>

                          </div>
                        </li>
                    </div>
                    <div class='event-2'>
                        <time>1934</time>
                        <li>
                          <div class='content'>
                            <p>
                                asdsadsadsadsad
                            </p>
                          </div>
                        </li>
                    </div>
                  </ul>
                </section>

Answer 1

你的 HTML 结构是错误的，你不应该直接在 ul 标签中添加 div

ul 标签里面必须有 li 标签，然后你可以把你想要的任何东西放在 li 里面

我在你的代码中做了一些改动，最好在 time 标签上使用伪元素而不是 li

See updated jsfiddle