Question

基本上我有这样的标题，即测试。在大屏幕上，它没有居中，而是向右移动。我希望它居中，但我无法使其居中。在较小的屏幕上，它位于图像的右侧，然后将其向左推，而不会使任何内容居中。在所有情况下，我都希望它位于图像下方并位于页面中心。谢谢。

我一直在尝试对齐，浮动，宽度和边距/填充，但是没有任何效果。

    <div class="primary-content">
   <span class="title">FTC TEAM 4466</span>
      <a href="#egg">egg</a>


        <div class="bot-pod">
          <div class="bot">
               <img src="img/finalbot.svg" alt="old robot">
            </div>
            <div class="pod">
               <img src="img/finalpod.svg" alt="old robot">
            </div>
         </div>


  <div class="team">
          <span class="title">testing</span>
          <h1>4466</h1>
          <span class="egg">        <p>
      <a href="#egg">egg</a>
    </p></span>
  </div><!-- End  -->

    </div><!-- End .primary-content -->

body {
  color: #000;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.primary-content{
  text-align:center;
  font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
  font-size: 15rem;
  padding-top:20px;
    margin-top:0;
  padding-bottom: 50px;
  margin-bottom:0px;
  display:block;
}


.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px; 
margin: 0 1px 0 1px;
}

.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px; 
margin: 90.66px 1px 90.66px 1px;
}

@media only screen and (max-width: 1300px) {
  .bot {
text-align:center;
width:100%;
padding:0; 
margin: 0;
}

.pod {
text-align:center;
width:100%;
padding:0; 
margin: 0;
}
  img[src="img/finalbot.svg"]{
    width:70%;
    align-content:center;
}

img[src="img/finalpod.svg"]{
    width:70%;
    align-content:center;
}
}

我虽然在代码中位于其他代码下面的div会做到这一点，但事实并非如此。我认为大屏幕上的问题可能是.bot和.pod的高度不同，但是我不知道如何随着页面越来越小而使它们相等。我不知道为什么小屏幕（宽度1300像素以下）会出现我的问题。再次感谢。

Answer 1

将显示设置为flex，并将justify.content:center添加到您要居中的div的CSS属性中。

Answer 2

之所以会发生这种情况，是因为您在标题中使用了标签， span标签无法居中，请将其更改为h1标签或其他

Answer 3

我对您的代码做了一些更改，这就是我想出的：

随时使用

body {
  color: #000;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.primary-content{
  text-align:center;
  font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
  font-size: 15rem;
  padding-top:20px;
    margin-top:0;
  padding-bottom: 50px;
  margin-bottom:0px;
  display:block;
  align-content:center;
}


.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px; 
margin: 0 1px 0 1px;
}

.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px; 
margin: 90.66px 1px 90.66px 1px;
}

@media only screen and (max-width: 1300px) {

.primary-content{
  text-align:center;
  font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
  font-size: 4rem;
  padding-top:20px;
    margin-top:0;
  padding-bottom: 50px;
  margin-bottom:0px;
  display:block;
  align-content:center;
}

  .bot {
text-align:center;
width:100%;
padding:0; 
margin: 0;
}

.pod {
text-align:center;
width:100%;
padding:0; 
margin: 0;
}
  img[src="img/finalbot.svg"]{
    width:70%;
    align-content:center;
}

img[src="img/finalpod.svg"]{
    width:70%;
    align-content:center;
}
}

<div class="primary-content">
   <h2>FTC TEAM 4466</h2>
      <a href="#egg">egg</a>


        <div class="bot-pod">
          <div class="bot">
               <img src="img/finalbot.svg" alt="old robot">
            </div>
            <div class="pod">
               <img src="img/finalpod.svg" alt="old robot">
            </div>
         </div>


  <div class="team">
          <h2>testing</h2>
          <h2>4466</h2>
          <p><a href="#egg">egg</a></p>
  </div><!-- End  -->

    </div><!-- End .primary-content -->

CSS格式问题，div彼此移动且div不居中

3 个答案: