html - 如何将 ul、li、a 与 h1 和 h2 正确居中？

Question

给出的将身体居中的原始建议导致 ul, li, a 未正确居中：

.jumbotron h1, .jumbotron h2 {
text-align: center;    
}

.jumbotron {
    position: relative;
    top: -9px
    padding: 75px 0px 75px 0px;
}

.jumbotron ul, .jumbotron li, .jumbotron a {
    display: inline;
    text-decoration: none;
}

我尝试的解决方案：这个似乎效果最好，但必须有一种方法使身体居中并使所有元素对齐。

.jumbotron {
  position: relative;
  text-align: center;
  top: -9px;
  /*Extend out div use padding */
  padding: 75px 0px 75px 0px;
}

.jumbotron ul,
.jumbotron li,
.jumbotron a {
  display: inline;
  padding: 75px 10px 75px 10px;
  text-decoration: none;
}

<div class="jumbotron">
  <h1>
    abcde
  </h1>
  <h2>
    abcde
  </h2>
  <ul>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#resume">Resume</a></li>
  </ul>
</div>

标签： htmlcss

Answer 1

尝试这个：

.jumbotron {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  >* {
    flex: 1;
  }
}

<div class="jumbotron"> 
 <h1> abcde </h1> 
 <h2> abcde </h2> 
 <ul>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#resume">Resume</a></li>
 </ul> 
</div>