2017-02-19 1 views
0

さて、私はバナーテキストと画像をpsdとして配置したいと思っていますが、margin: 0 auto, margin: 0 auto 0 auto,などで試しましたが、タグセンターを使用しても動作しませんでした。どうすれば修正できますか?私は大きなページに自分のhtmlを見たいと思うとき、それは悪く見え、中心にない、私は誰かが私を助けることができるかわからない。CSSでdivsを中心にするには?

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

答えて

0

試してみてください。

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

width:50%;は、ページの中央にdivを配置します(必要な場合)。

0

あなたはdivのセンターをこのように設定

margin: auto; 
width: 50%; 

あなたが幅を設定したり、中心決して、その後のdivを100%に幅を設定しない場合。

あなたはdivの内のテキストを中央揃えにしたい場合は、次に使用する画像を中央にしたい場合は、

text-align: center 

を使用

display: block; 
margin: auto;