Question

好吧，我想把我的横幅文字和图像作为psd的中心，但是我尝试使用margin: 0 auto, margin: 0 auto 0 auto,和其他东西，但即使我使用标签中心它也没有用，怎么能我修理它？当我想看到我的html到一个更大的页面时，它看起来很糟糕，而且没有居中，我不知道该怎么做，有人可以帮助我。

CSS： -

.banner{
    width: 100%;
    height: 500px;
    background-color: #505a78;
}

.banner p{
    display: block;
}

.banner_text{
    color: #fff;
    padding: 150px;
}

.banner_text h1,
.banner_text h1 span{
    font-size: 35px;
    font-family: 'Montserrat Black';
}

.banner_text .banner_wrap{
    margin:0 auto 0 auto; 
    width:auto;
}

.banner_text p{
    color: #a5abbb;
    font-family: 'Montserrat Light';
}

.banner_text p > span{
    display: block;
}

.banner_text a {
    margin-top: 25px;
    display: block;
    color: white;
    text-align: center;
    width: 62px;
    padding: 4px 25px;
    text-align: center;
    background-color: #7cdf95;
    font-weight: bold;
    font-family: 'Montserrat Black';
text-align: center;
}

.banner_text img {
    width: 75%;
    margin-top: -275px;
}

HTML： -

  <section class="banner">
         <div class="banner_text">
            <div class="banner_wrap">
               <h1>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span></h1>
               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo.<span> Cum sociis  natoque penatibus et magnis dis parturient montes, nascetur</span></p>
               <a href="#">button</a>
               <img src="img/16251331_10210478393849069_2072529108_o.png" alt="">
            </div>
         </div>
      </section>

psd my_html

Answer 1

尝试添加：

.banner_text .banner_wrap{
    margin:0 auto 0 auto; 
    width:50%;
}

width:50%;会将div置于页面中间，如果这是您想要的！

Answer 2

你以这种方式设置div中心

margin: auto;
width: 50%;

如果您没有设置宽度或将宽度设置为100％，那么div将永远不会居中。

如果您想将文本居中于div中，请使用

text-align: center

如果您想要居中图像，请使用

display: block;
 margin: auto;

如何在css中居div？

2 个答案: