Question

这是来自前端证书的免费编码阵营的项目之一。

我尝试对齐formData元素的项目符号点，并使用bootstrap在页面底部设置页脚。

Codepen html：

li

codepen css：`

<html>
  <head>
    <title>Mark Dean Tribute Page</title>
    <link href="https://fonts.googleapis.com/css?family=Keania+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">

  </head>
  <body>
    <div class="container-fluid">
    <h1 class="text-center main-header"> The Mark Dean <br /> Tribute Page</h1>
      <hr />
    <div class="row header ">
      <div class="col-md-4">
        <a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121539_foudov.jpg"></a>
      </div>
      <div class="col-md-4">
        <a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080684/20170529_121729_p74ux7.jpg"></a>
      </div>
      <div class="col-md-4">
        <a><img class="header-image img-fluid"src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121615_rpox2c.jpg"></a>
      </div>
      <div class="list-div" style="width = 25%; margin-left: auto; margin-right: auto; ">
        <ul class="facts">
          <li><p>Mark Dean was born 1957 in jefferson city</p></li>
          <li><p>1982 Dean earned his master's degree in electrical engineering from Florida Atlantic university</p></li>
          <li><p>1992 Dean graduated and completed his doctorate from Stanford university</p></li>
          <li><p>1996 he was the first African American ever to rexeive the honor as an ibm fellow</p></li>
          <li><p>1997 he was honered with the black engineer of the year presidents award and was inducted into the hall of national inventors</p></li>
          <li><p>1999 Mark Dean lead a team of engineers to develop a gigahertZ chip</p></li>
          <li><p> Working closely with a colleague, Mark Dean developed USA industry standard architecture system bus</p></li>
          <li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin vitae lobortis nibh tempus at.  et sem id placerat.</p></li>
          <li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at.  vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
          <li><p>Facts preview vitae lobortis nibh tempus at.  Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
          <li><p>Visit <a href="https://www.biography.com/people/mark-dean-604036">here</a> to read more about Mark Dean</p></li>
         </div>
        </ul>
    </div>
      <footer class="footer navbar-default navbar-fixed-bottom">
        <div class="container-fluid">
          <p>This was coded and Created by <em>Terrell Wright</em></p>
        </div>
      </footer>
    </div>
  </body>
</html>

Answer 1

使用bootstrap 4（根据您的codepen），您可以将.d-flex.text-center.flex-column.align-items-center添加到.facts并从您的css中删除text-align: center。这会将.facts的内容放在弹性列中，居中对齐子项并居中对齐文本。这将把子弹放在每个弹性孩子的旁边。

然后将页脚固定到屏幕底部，将.navbar.fixed-bottom.justify-content-center;添加到页脚以将其固定到屏幕底部并垂直对齐内容。然后为其分配height，并在height上将padding-bottom值用作body，为菜单腾出空间。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<html>
  <head>
    <title>Mark Dean Tribute Page</title>
    <link href="https://fonts.googleapis.com/css?family=Keania+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<style>
body {
  background-color: rgb(41, 41, 41);
  margin-left: 30px;
  margin-right: 30px;
  padding-bottom: 50px;
}

.main-header {
  font-family: 'Keania one', serif;
  color: rgb(82, 68, 50);
  font-size: 64px;
  margin-bottom: 100px;
  
}
.header-image {
  width: 300px;
  height: 300px;
  border-radius: 20px;
  border: 5px solid #3D3124;
  margin-top: 10px;
  margin-left: 15px;
}
.header {
  background-color: #3D3730;
  border-radius: 30px;
  
}

hr {
  background-color: #524432;
  margin-bottom: 80px;
  height: 1px;
  border-radius: 20px;
}


.facts li {
  display: list-style;
  list-style: circle;
  font-family: "Crimson Text", serif;
  font-size: 24px;
  color: black;
  
  
  /* bootstrap floats to left - for override
  
  */
}

.facts li:first-child {
  margin-top: 40px;
}

.footer {
  color: #fff;
  background: rgba(0,0,0,0.5);
  height: 50px;
}

footer p {
  margin: 0;
}
</style>
  </head>
  <body>
    <div class="container-fluid">
    <h1 class="text-center main-header"> The Mark Dean <br /> Tribute Page</h1>
      <hr />
    <div class="row header ">
      <div class="col-md-4">
        <a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121539_foudov.jpg"></a>
      </div>
      <div class="col-md-4">
        <a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080684/20170529_121729_p74ux7.jpg"></a>
      </div>
      <div class="col-md-4">
        <a><img class="header-image img-fluid"src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121615_rpox2c.jpg"></a>
      </div>
      <div class="list-div" style="width = 25%; margin-left: auto; margin-right: auto; ">
        <ul class="d-flex text-center facts flex-column align-items-center">
          <li><p>Mark Dean was born 1957 in jefferson city</p></li>
          <li><p>1982 Dean earned his master's degree in electrical engineering from Florida Atlantic university</p></li>
          <li><p>1992 Dean graduated and completed his doctorate from Stanford university</p></li>
          <li><p>1996 he was the first African American ever to rexeive the honor as an ibm fellow</p></li>
          <li><p>1997 he was honered with the black engineer of the year presidents award and was inducted into the hall of national inventors</p></li>
          <li><p>1999 Mark Dean lead a team of engineers to develop a gigahertZ chip</p></li>
          <li><p> Working closely with a colleague, Mark Dean developed USA industry standard architecture system bus</p></li>
          <li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin vitae lobortis nibh tempus at.  et sem id placerat.</p></li>
          <li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at.  vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
          <li><p>Facts preview vitae lobortis nibh tempus at.  Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
          <li><p>Visit <a href="https://www.biography.com/penavbar fixed-bottom justify-content-centerople/mark-dean-604036">here</a> to read more about Mark Dean</p></li>
         </div>
        </ul>
    </div>
      <footer class="footer navbar fixed-bottom justify-content-center">
        <div class="container-fluid">
          <p>This was coded and Created by <em>Terrell Wright</em></p>
        </div>
      </footer>
    </div>
  </body>
</html>

如何对齐项目符号。我正在使用bootstrap

1 个答案: