Question

我试图将p元素集中在一起，但我尝试的任何工作都没有。它适用于该页面的先前版本，但我无法理解它为何无法正常工作。

这是html：

<div class="aligncenter">

<p class='alignleft'>
    <img src="images/about1.jpg" alt="cupcakes" style="width:300px;height=224px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <p class='alignright'>
    <img src="images/about4.jpg" alt="cupcakes2" style="width:300px;height=224px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    </div>

和CSS：

.alignleft {
    float: left;
     width:300px;
     color: #604209;
     font-weight: bold;
     font-size: 18px;


}
.alignright {
    float: right;
     width:300px;
     color: #604209;
     font-weight: bold;
     font-size: 18px;

}

.aligncenter {
  style=width:800px; 
  margin:0 auto;
  display: inline-block;
 width: 50%;
}

.alignleft {
  float: left;
  width: 300px;
  color: #604209;
  font-weight: bold;
  font-size: 18px;
}
.alignright {
  float: right;
  width: 300px;
  color: #604209;
  font-weight: bold;
  font-size: 18px;
}
.aligncenter {
  style=width: 800px;
  margin: 0 auto;
  display: inline-block;
  width: 50%;
}

<div class="aligncenter">

  <p class='alignleft'>
    <img src="images/about1.jpg" alt="cupcakes" style="width:300px;height=224px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <p class='alignright'>
    <img src="images/about4.jpg" alt="cupcakes2" style="width:300px;height=224px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</div>

我知道如何将这些p元素集中在一起吗？

Answer 1

你的CSS有些错误。

在aligncenter课程中，您宣布width为800px，然后再次用50％覆盖;您需要的是min-width属性。设置最小宽度将使最小宽度保持至少600px，因为它足以容纳左右对齐的内容，总计总计600px。如果总宽度小于1200px，则设置宽度50％将小于600px。

同时使用display: inline-block不让您将内容放在中心位置。因为这个属性用于填充浏览器的整个宽度，这显然是你不想要的。

style=width: 800px真的在你的CSS或只是一个错字？

如下所示更新您的aligncenter课程，一切都应按预期工作。

.alignleft {
    float: left;
     width:300px;
     color: #604209;
     font-weight: bold;
     font-size: 18px;


}
.alignright {
    float: right;
     width:300px;
     color: #604209;
     font-weight: bold;
     font-size: 18px;

}

.aligncenter {
  width:50%; 
  min-width: 600px;
  margin:0 auto;
}

<div class="aligncenter">

<p class='alignleft'>
    <img src="images/about1.jpg" alt="cupcakes">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <p class='alignright'>
    <img src="images/about4.jpg" alt="cupcakes2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
</div>

Answer 2

在 .aligncenter 类中放置 text-align：center; 。并将 display：block 代替内联块。

.aligncenter {
  width:800px; 
  margin:0 auto;
  display: block;
  width: 50%;
  text-align: center;
}

以下是fiddle。

Answer 3

对我而言，如果您从display: inline-block;移除.aligncenter，则此功能正常。 inline-block将始终保留完整的可用宽度（至少如果没有其他内联块元素显示为“邻居”，请参阅here）。

请注意，在'中使用<p class='alignleft'>（单引号）不是有效的html样式（尽管大多数浏览器都接受它）。您应该始终使用双引号：<p class="alignleft">。

希望这有帮助！

使p元素居中不起作用

3 个答案: