Question

有人可以帮我吗？我玩了很多，我无法解决它，之前修好了但我忘了怎么做。

我想水平对齐而不垂直重叠，会很乐意帮忙。：）

谢谢，解决了！

HTML：

     <div class="contain-info"><!-- contain -->
 <div class="info1">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div>  

 <div class="info2">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div> 

 <div class="info3">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div> 
 </div><!-- contain -->

CSS：

.contain-info {
 display: inline-block;
 position: relative;
 text-align: center;
 margin-left: auto;
 margin-right: auto;

 }

.info1 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 float: left;
 position: absolute;
 }

.info1 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info1 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info2 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 margin: auto;
 position: absolute;

 }

.info2 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info2 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info3 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 position: absolute;
 float: right;
 }

.info3 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info3 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }

Answer 1

请检查此修改后的版本JsFiddle我希望这是您尝试实现的目标。

     .contain-info {
     position: relative;
     text-align: center;
     margin: auto;
     }

.info1 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 }

.info1 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info1 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info2 {
 font-family: "Bebas Neue";
 text-align: center;
 margin: auto;
 }

.info2 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info2 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info3 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 }

.info3 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info3 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }

我只是在

{{1}}

上使用了

 margin:auto

并删除了内联块样式

Answer 2

您可以尝试使用 CSS flexbox模型 - 使用flexbox实现所需布局的可能性几乎是无穷无尽的。开始时可能有点困难，但是一旦熟悉模型，就可以按照自己的方式完成任务。

.contain-info {
    display: flex;
    justify-content: center;
    width: 100%;
}

在上面的示例中，我要求父级.contain-info将所有子项显示为弹性项。然后对内容进行对齐，使它们在父元素的中心水平对齐。

参见概念验证： JSfidde

Mozilla有一个very comprehensive guide on using flexbox，但是如果你想要一个更加用户友好的方式向你解释，请看Chris Coyier's article（目前我认为网站维护已经停止了）。

Answer 3

具有中心类的元素将位于其父元素的中间因为你使用div。 display：block不是必需的。 div的显示默认是块

.center
{
    position:relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

Answer 4

HTML

 <div class="contain-info"><!-- contain -->
 <div class="info">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div>  

 <div class="info">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div> 

 <div class="info">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div> 
 </div><!-- contain -->

CSS

.contain-info {
 display: inline-block;
 position: relative;
 text-align: center;
 margin-left: auto;
 margin-right: auto;

 }

.info {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 float: left;
 position: relative;
 width:33%;
 }

.info p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }

小提琴：http://jsfiddle.net/Maw6u/

Answer 5

您在contains-info中使用 display：inline-block 。因此我建议你在contains-info的父级中使用 text-align：center 。

并且float不是绝对定位元素中使用的属性，您应该使用左和右属性。查看解决方案 - http://codepen.io/anon/pen/abFzf

.container {
  text-align:center;
  width:100%;
}
.contain-info {
 position: relative;
 text-align: center;
  display:inline-block;
  margin:0 auto;
  width:100%;
 }

.info1 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 left:0;
 position: absolute;
 }

.info1 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info1 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info2 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 position: absolute;
 margin:0 auto;
 left:0;
 right:0;
 }

.info2 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info2 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info3 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 position: absolute;
 right:0;
 }

.info3 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info3 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }

我希望它有所帮助。

如何水平居中div？

5 个答案: