html - Web サイトのフッターで項目を揃えるにはどうすればよいですか

Question

私はサイトwww.albafitness.comに取り組んでいます

ご覧のとおり、ソーシャル メディアのアイコンとフッター メニューは水平方向に整列していません。誰かがこれを行う方法を教えてもらえますか?

Answer 1

何かを配置するには、次の 3 つのスーパー パワーがあります。 1. POSITION ABSOLUTE 2. VERTICAL ALIGN 3. FLOAT

今回はnoを使用しています。1 CSS:

.footer_content_wrraper
{
    position:absolute;
    bottom:0;
}

HTML:

<div class="footer_content_wrapper">
....../
</div>   

Answer 2

同じ html を保持する必要がある場合は、メニューで負のマージンを使用できます。

.footer_menu {margin-top: -21px}

ただし、モバイル サイズになるとメディア クエリから削除する必要があります。重ならないように

Answer 3

ソーシャル アイコンにテーブルを使用する特定の理由はありますか? このような場合は、ul タグを使用することをお勧めします。

この CSS を試してください:

.footer_content {
    border-top: 1px solid #1F2024;
    clear: both;
    float: left;
    margin: 30px 30px 0;
    padding: 20px 0 0;
    width: 940px;
    text-align: center; // Align both elements horizontally
}

table.cnss-social-icon tr td, table.cnss-social-icon, table.cnss-social-icon tr {
    background: none repeat scroll 0 0 transparent !important;
    border: medium none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    display: inline-block; // inline-block will make it inherit rules from text-align rule
}

.footer_menu {
    padding: 10px 0;
    // float: right; //float will always pull your element to one side. This should be removed.
}