如何在bootstrap网格div中移动元素？

Question

CSS: CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS.CSS:

  border: 5px solid red;
}

#menu li{
  font-size: 25px;
  display:inline;
}

HTML:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2" id="menu">
      <ul class ="Menuitems">
        <li>The Hub</li>
          <li>FAQ</li>
        </ul>
      </div>

我试图将li标签中的文字移到div的中心。我无法找出这样做的CSS，我不希望使用 "position relative""top: 5px"，因为这是不好的做法，会破坏项目的响应式设计元素。文字对齐也是不可能的，因为全屏的时候div不大，请看代码笔的资料。

https:/codepen.iomdot700penbGEGwLa。

Answer 1

用bootstrap找到了这个

来源 : https:/www.codeply.comgobp6COUMfNrEU

<div class="d-flex">
  <ul class="list-inline mx-auto justify-content-center">
    <li class="list-block-item">Item 1</li>
    <li class="list-block-item">Item 2</li>
    <li class="list-block-item">Item 3</li>
    <li class="list-block-item">Item 4</li>
    <li class="list-block-item">Item 5</li>    
  </ul>
</div>