将Div放在页面中间

时间：2018-02-27 14:09:20

标签： html css html-lists centering

中间正文不会居中，我不知道为什么。此外，如果您有任何其他建议，他们将不胜感激！这是一个项目，我只需要一些帮助。我正在使用margin：auto属性，但它似乎不起作用。

body {
  margin:10px;
  background-color:white;
}

/* Unordered List */
ul {
  border:1px solid green;
  width:750px;
}


/* Lists styles */
li {
  font-weight:bold;
}
.test-div {
  width:500px;
  height:250px;
  background-color:#f2f2f2;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

#body-text {
  width:500px;
  display:block;
  margin-right:auto;
  margin-left:auto;
}

/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */

.divider {
  background-color:black;
  width:500px;
  height:1px;
}

.text-center {
  display:block;
  margin-right:0px auto;
  margin-left:0px auto;
}

.centered {
  display:block;
  margin-right:auto;
  margin-left:auto;
  text-align:center;
}

.link {
  text-decoration:none;
  margin-left::auto;
  margin-right:auto;
}

.link:hover {
  text-decoration:none;
  color:#00008B;
}

#footer {
  text-align:center;
  width:800px;
  height:500px;
  padding:25px;
  border:2px solid green;
  margin:0 auto;
  
}

.filler {
  height:100px;
}

ul .divider {
  margin-right:auto;
  margin-left:auto;
}
<head>
</head>


<script>
  
</script>

<div class="text-center" style="display:block;margin-left:auto;margin-right:auto;background-color:#f2f2f2;width:750px;height:450px;border-radius:15px;"> 
  <img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px"/>
  <br>
  <em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>

<div id="body-text">
  <ul class="text-center" style="list-style-type:none;">
    <br>
    <div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
    <h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
      <p> <u> A Timeline of Elon Musk's Life life </u> </p>
    </div>
    <br>
    <li>June 28, 1971 - Born in South Africa </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> Taught himself how to code at age 12</li>
    <br> 
    <div class="divider"> </div>
    <br>
    <li> Creates and writes a video game called Blastar; sells it for the equivalent of   $500 </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
    <br>
    <div class=divider> </div>
    <br>
    <li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> 2002: Becomes an American citizen </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> 2002: Founds SpaceX9 </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> 2004: Invests in Tesla Motors </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> October 2008: Becomes Tesla’s CEO </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> Jun 29, 2010: Tesla IPO </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> August 2013: Releases sketch and concept of the Hyperloop </li>
    <br>
    <div class="divider"> </div>
 </ul> <!-- END of list -->
        <div class="filler"> </div>
     </div> <!-- END Body Text -->
    
      <!-- Footer -->
 <div id="footer">
     <div style="width:600px; height:4px; background-color:black;margin:0 auto">
      </div>
    <div class="filler"> </div>
 
      <!-- Credits START -->
    <h4> <b><em> Credits </em><b> </h4>
    <div style="border:1px solid lightgrey;width:550px; margin:0 auto">
      <p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
    </div>
      <p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>

这会把所有内容都放在中间文本，任何解决方案？

4 个答案:

答案 0 :(得分：0)

将text-align: center;添加到您的<li>代码中。

li {
  text-align:center;
}

答案 1 :(得分：0)

对于正文，我添加了

AVSampleBufferDisplayLayer

希望这会对你有帮助。

附件摘录。 如果有任何其他问题，请告诉我。

＆＃13;
＆＃13; 
#body-text ul > li {
text-align:center;
}
＆＃13; 
body {
  margin:10px;
  background-color:white;
}

/* Unordered List */
ul {
  border:1px solid green;
  width:750px;
}


/* Lists styles */
li {
  font-weight:bold;
}
.test-div {
  width:500px;
  height:250px;
  background-color:#f2f2f2;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

#body-text {
  width:500px;
  display:block;
  margin-right:auto;
  margin-left:auto;
}
#body-text ul > li {
text-align:center;
}

/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */

.divider {
  background-color:black;
  width:500px;
  height:1px;
}

.text-center {
  display:block;
  margin-right:0px auto;
  margin-left:0px auto;
}

.centered {
  display:block;
  margin-right:auto;
  margin-left:auto;
  text-align:center;
}

.link {
  text-decoration:none;
  margin-left::auto;
  margin-right:auto;
}

.link:hover {
  text-decoration:none;
  color:#00008B;
}

#footer {
  text-align:center;
  width:800px;
  height:500px;
  padding:25px;
  border:2px solid green;
  margin:0 auto;
  
}

.filler {
  height:100px;
}

ul .divider {
  margin-right:auto;
  margin-left:auto;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

将.controller('MyCtrl', function($scope, $ionSlideBoxDelegate) { //after populating your data in slide just call $ionicSlideBoxDelegate.update(); } 宽度更改为#body-text;并删除width: 750px宽度属性。

.ul

答案 3 :(得分：0)

你应该使用flex css属性：

你的html看起来像这样（你现在需要从标记中删除未使用的类）：

<div class="container">  <!-- !!!!!!!!!! ADD THIS !!!!!!!!!!! -->
<div class="text-center"> <!-- !!!!!REMOVE INLINE STYLE HERE!!!! -->
  <img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px"/>
  <br>
  <em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>

<div id="body-text">
  <ul class="text-center" style="list-style-type:none;">
    <br>
    <div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
    <h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
      <p> <u> A Timeline of Elon Musk's Life life </u> </p>
    </div>
    <br>
    <li>June 28, 1971 - Born in South Africa </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> Taught himself how to code at age 12</li>
    <br> 
    <div class="divider"> </div>
    <br>
    <li> Creates and writes a video game called Blastar; sells it for the equivalent of   $500 </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
    <br>
    <div class=divider> </div>
    <br>
    <li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> 2002: Becomes an American citizen </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> 2002: Founds SpaceX9 </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> 2004: Invests in Tesla Motors </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> October 2008: Becomes Tesla’s CEO </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> Jun 29, 2010: Tesla IPO </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
    <br>
    <div class="divider"> </div>
    <br>
    <li> August 2013: Releases sketch and concept of the Hyperloop </li>
    <br>
    <div class="divider"> </div>
 </ul> <!-- END of list -->
        <div class="filler"> </div>
     </div> <!-- END Body Text -->
 <div>  <!-- !!!!!!!!!! ADD THIS !!!!!!!!!!! -->
      <!-- Footer -->
 <div id="footer">
     <div style="width:600px; height:4px; background-color:black;margin:0 auto">
      </div>
    <div class="filler"> </div>

      <!-- Credits START -->
    <h4> <b><em> Credits </em><b> </h4>
    <div style="border:1px solid lightgrey;width:550px; margin:0 auto">
      <p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
    </div>
      <p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>
  `

for css：

body {
  margin:10px;
  background-color:white;
}

/* Unordered List */
ul {
  border:1px solid green;
  width:750px;
}


/* Lists styles */
li {
  font-weight:bold;
}
.test-div {
  width:500px;
  height:250px;
  background-color:#f2f2f2;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/*#body-text {*/
/*   width:500px; */
/*   display:block; */
/*   margin-right:auto; */
/*   margin-left:auto; */
/*}*/

/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */

.divider {
  background-color:black;
  width:500px;
  height:1px;
}

/*.text-center {
  display:block;
  margin-right:0px auto;
  margin-left:0px auto; 
}*/

/*.centered {
  display:block;
  margin-right:auto;
  margin-left:auto;
  text-align:center;
} */

/* THIS IS FLEX  */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.link {
  text-decoration:none;
  margin-left::auto;
  margin-right:auto;
}

.link:hover {
  text-decoration:none;
  color:#00008B;
}

#footer {
  text-align:center;
  width:800px;
  height:500px;
  padding:25px;
  border:2px solid green;
  margin:0 auto;

}

.filler {
  height:100px;
}

ul .divider {
  margin-right:auto;
  margin-left:auto;
}

flex的有用指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

相关问题
最新问题