css - 文本和图像不会在我的页面上居中

Question

我正在制作我的第一个网页，我有我想要的元素 - 我似乎无法让它们在页面上居中。我试过 margin: auto, text-align: center, 还有很多其他的东西。没有任何效果。

我希望页眉、图像和页面末尾的按钮成为页面的中央书脊。如有任何建议，我们将不胜感激。

谢谢

这是我的代码:

HTML:

<div class="container">

  <h1 class="text-center"> My tribute to Ami Coxill Moore</h1>
</div>

<!-- picture of ami here -->
<div class="container">
  <div class="row">
     <div class="col-xs-4 col-xs-offset-4"></div>
          <a href="#add-fastrack"><img class="img-resize img-center img-zero image-border img-responsive" src="https://i.imgur.com/Lc5nBon.jpg" alt="Ami laughing at her 26th Birthday"> </a>
  </div>
</div>

CSS

body {margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
 color: #0000ff;  }


h1 {
display: inline-block;
background-color: yellow;
font-size: 300%;
border: solid;
border-radius: 25px;
align: center;
padding-left: 40px;
padding-right: 40px;
float: center;
max width: 100%;
text-align: center;
marrgin: 0 auto;
float: center;}

div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;}

.img-responsive {
margin: 0 auto;}

.img-resize {
max-width: 400px; 
max-height: auto;}

Answer 1

你需要添加容器text-align

<div class="container" style="text-align: center;">

包裹元素的 div 负责对齐元素。