html - 如何在响应式网站的一段文本下居中对齐两列列表？

Question

请看两张截图。一张屏幕截图显示左列未居中。第二个屏幕截图的两列都在段落下方居中。我想在响应式网站上实现这个结果。

• 当前结果[ https://s11.postimg.org/bcu53jhhv/current_result.jpg][1]

• 预期结果[ https://s11.postimg.org/9mb421zyr/intendend_result.jpg][2]

  <p align="center">
      One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid under a tree. When the rain stopped, I began to walk home.
  </p>
  
  <div style="float: left; width: 50%;">
      <ul>
          <li><i class="fa fa-check"></i>   Item 1</li>
          <li><i class="fa fa-check"></i>   Item 2</li>
          <li><i class="fa fa-check"></i>   Item 3</li>
      </ul>
  </div>
  
  <div style="float: right; width: 50%;">
      <ul>
          <li><i class="fa fa-check"></i>   Item 4</li>
          <li><i class="fa fa-check"></i>   Item 5</li>
          <li><i class="fa fa-check"></i>   Item 6</li>
      </ul>
  </div>
  

Answer 1

您应该将 ul float 到右侧以正确对齐它。请检查:https://jsfiddle.net/esx6fzyf/1/

<p align="center">One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I
    continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid
    under a tree. When the rain stopped, I began to walk home.</p>

<div>
    <div style="float: left; width: 50%;">
        <ul style="float: right;">
            <li>
                <i class="fa fa-check"></i> Item 1
            </li>
            <li>
                <i class="fa fa-check"></i> Item 2
            </li>
            <li>
                <i class="fa fa-check"></i> Item 3
            </li>
        </ul>
    </div>
    <div style="float: right; width: 50%;">
        <ul>
            <li>
                <i class="fa fa-check"></i> Item 4
            </li>
            <li>
                <i class="fa fa-check"></i> Item 5
            </li>
            <li>
                <i class="fa fa-check"></i> Item 6
            </li>
        </ul>
    </div>
</div>