Question

我正在制作我的第一个网页，我有我想要的元素 - 我似乎无法让他们在页面上居中。我尝试过margin：auto，text-align：center，以及许多toher事物。没有任何效果。

我希望页面末尾的标题，图片和按钮成为我页面的中心。任何建议将不胜感激。

由于

这是我的代码：

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负责对齐元素。

Answer 2

定义一个类并将其调用为例如.text-center并将其放入其中text-align: center，一旦想要将文本居中，只需将此类提供给容器元素（父元素）。

希望这可以解决您的问题。

＆＃13;

body {margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
 color: #0000ff;  }

.text-center {
  text-align: center;
}
h1 {
display: inline-block;
background-color: yellow;
font-size: 300%;
border: solid;
border-radius: 25px;
padding-left: 40px;
padding-right: 40px;
max width: 100%;}

div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;}

.img-resize {
max-width: 400px; 
max-height: auto;}

＆＃13;

<div class="container text-center">
  <h1> My tribute to Ami Coxill Moore</h1>
</div>
<!-- picture of ami here -->
<div class="container text-center">
  <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>

＆＃13;

Answer 3

您的代码中存在一些错误，例如，您必须使用max-width: 100%;没有max width: 100%;或text-align: center;没有align: center; float left的值{ {1}}或right因此float:center错误，以及其他错误。

查看我的代码：

＆＃13;

body {
    margin-top: 100px;
    background-color: #ff69b4;
    font-family: "gerogia", serif;
    color: #0000ff;
}

h1 {
    background-color: yellow;
    font-size: 300%;
    border: 1px solid;
    border-radius: 25px;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
}

div {
    padding-bottom: 20px;
    padding-right: 50px;
    padding-left: 50px;
}

.row {
    text-align: center;
}

.row img {
    display: inline-block;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <h1 class="text-center"> My tribute to Ami Coxill Moore</h1>
</div>

<div class="container">
  <div class="row">
    <a href="#add-fastrack"><img class="img-resize img-center img-zero image-border img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" alt="Ami laughing at her 26th Birthday">
    </a>
  </div>
</div>

＆＃13;

文字和图片不会以我的页面为中心

3 个答案: