DivをDivにセンタリングする（コンテンツのサイズに基づいてdivをサイジングする）

Question

さて、私は間違っていることを正直に知らない。だから、私はあなたをお見せしましょう：

これは私が（PS製）を達成しようとしているものです：

http://puu.sh/ryXC9/7d82671ee0.png

私の結果はこれまでのところは何：

明らか

http://puu.sh/ryXST/02c9722a53.png（ではありません成功すると、そしてサイドノートとして、オレンジ色のボックスはちょうどプレースホルダです、私は後でフォームを記入します）。

私が抱えている問題は、まず「社会的コンテンツ」の幅を保持されたコンテンツの幅と高さにしようとすることです。もちろん、「主な社会」は画面の幅とコンテンツの高さだけです。私が「ソーシャルコンテンツ」で幅のことを達成できれば、「マージン：0オート」で区切りを整えることができますが、悲しいかな、私は自分のジレンマを理解できません。これは、（「私たちに従ってください」バーは、その無関係として、除外されている）私のrelaventのマークアップです：

.fa-facebook { 
 
    color: white; 
 
    overflow: hidden; 
 
} 
 
.fa-twitter { 
 
    color: white; 
 
    padding: 0.2em; 
 
} 
 
#main-social { 
 
    height: 8em; 
 
} 
 
#social-content { 
 
    height: 100%; 
 
    width: 70%; 
 
    margin: 0 auto; 
 
    margin-top: 1.4em; 
 
} 
 
#facebook { 
 
    float: left; 
 
    display: inline-block; 
 
} 
 
#facebook a { 
 
    padding: 0.2em 0.4em 0.2em 0.4em; 
 
    background-color: #3b5998; 
 
    height: 100%; 
 
    text-decoration: none; 
 
} 
 
#facebook a:hover { 
 
    color: white; 
 
} 
 
#twitter { 
 
    float: left; 
 
    display: inline-block; 
 
} 
 
#twitter a { 
 
    background-color: #10bbe6; 
 
    text-decoration: none; 
 
} 
 
#twitter a:hover { 
 
    color: white; 
 
} 
 
#emailForm { 
 
    float:left; 
 
    display: inline-block; 
 
    width: 25em; 
 
    margin: 0 auto; 
 
    background-color: orange; 
 
    height: 7em; 
 
}

<script src="https://use.fontawesome.com/d7993286b8.js"></script> 
 
<div id="main-social"> 
 
    <div id="social-content"> 
 
    <div id="facebook"> 
 
     <a href="facebook.com" class="fa fa-facebook fa-5x"></a> 
 
    </div> 
 

 
    <div id="emailForm"> 
 

 
    </div> 
 

 
    <div id="twitter"> 
 
     <a href="twitter.com" class="fa fa-twitter fa-5x" ></a> 
 
    </div> 
 
    </div> 
 
</div>

また、問題でもある、それが応答する必要があり、サイト全体が応答私はまだレスポンシブなシーンには新しいので、私はそれに最善のアプローチを取っていないかもしれません。 （ヒントは必要ありませんが、大変感謝します:)

Answer 1

#social-contentのコンテンツの幅を取得するには、widthが定義されていないdisplay: inline-blockを使用してください。

#main-socialが単にコンテナである場合、flexboを中心に使用して、#social-contentを配置することができます。 #main-socialに次を追加してください：

#main-social { 
    display: flex; 
    justify-content: center; // Centers horizontally 
    align-items: center;  // If you need to center vertically, as well 
}