Центр div в нижнем колонтитуле

Question

Я хочу выровнять список ссылок в нижнем колонтитуле моего сайта, но независимо от того, что я пробовал, он, кажется, не выравнивается в центре нижнего колонтитула (как в нижнем колонтитуле w3schools пример).

Я пробовал использовать display: block, display: inline-block, text-align: center и другие, но независимо от того, что я делаю, я никогда не могу понять, как это правильно.

CSS:

footer ul { 
    list-style: none; 
    text-align: center; 
    } 

footer div { 
    margin: 0 auto; 
    display: inline-block; 
    } 

footer { 
    margin-left: 25%; 
    } 

HTML:

<footer> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">Facebook</a></li> 
     <li><a href="#" target="_blank">Twitter</a></li> 
     <li><a href="#" target="_blank">Instagram</a></li> 
     <li><a href="#" target="_blank">Vine</a></li> 
    </ul> 
    </div> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">YouTube</a></li> 
     <li><a href="#" target="_blank">Twitch</a></li> 
     <li><a href="#" target="_blank">Mobcrush</a> 
     <li><a href="#" target="_blank">SoundCloud</a></li> 
    </ul> 
    </div> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">GitHub</a></li> 
     <li><a href="#" target="_blank">Stack Overflow</a></li> 
     <li><a href="#" target="_blank">Pastebin</a></li> 
     <li><a href="#" target="_blank">Curse</a></li> 
    </ul> 
    </div> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">~</a></li> 
     <li><a href="#" target="_blank">~</a></li> 
     <li><a href="#" target="_blank">~</a></li> 
     <li><a href="#" target="_blank">~</a></li> 
    </ul> 
    </div> 
</footer> 

Любая помощь будет здорово, спасибо!

Answer 1

Просто используйте display:flex; на нижнем колонтитуле.

footer ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    } 
 

 
footer div { 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
    } 
 

 
footer { 
 
    display:flex; 
 
    
 
    }

<footer> 
 
    <div> 
 
    <ul> 
 
     <li><a href="#" target="_blank">Facebook</a></li> 
 
     <li><a href="#" target="_blank">Twitter</a></li> 
 
     <li><a href="#" target="_blank">Instagram</a></li> 
 
     <li><a href="#" target="_blank">Vine</a></li> 
 
    </ul> 
 
    </div> 
 
    <div> 
 
    <ul> 
 
     <li><a href="#" target="_blank">YouTube</a></li> 
 
     <li><a href="#" target="_blank">Twitch</a></li> 
 
     <li><a href="#" target="_blank">Mobcrush</a> 
 
     <li><a href="#" target="_blank">SoundCloud</a></li> 
 
    </ul> 
 
    </div> 
 
    <div> 
 
    <ul> 
 
     <li><a href="#" target="_blank">GitHub</a></li> 
 
     <li><a href="#" target="_blank">Stack Overflow</a></li> 
 
     <li><a href="#" target="_blank">Pastebin</a></li> 
 
     <li><a href="#" target="_blank">Curse</a></li> 
 
    </ul> 
 
    </div> 
 
    <div> 
 
    <ul> 
 
     <li><a href="#" target="_blank">~</a></li> 
 
     <li><a href="#" target="_blank">~</a></li> 
 
     <li><a href="#" target="_blank">~</a></li> 
 
     <li><a href="#" target="_blank">~</a></li> 
 
    </ul> 
 
    </div> 
 
</footer>

Answer 2

footer {text-align: center;} 
footer div { display: inline-block; } 

Этого вы хотите достичь?

Answer 3

Try Дисплей Таблица

footer ul { 
    list-style: none; 
    text-align: center; 
    } 

footer div { 
    margin: 0 auto; 
    display: table; 
    } 

footer { 
    margin-left: 25%; 
    } 

Answer 4

Если вы установите ширину вашего колонтитул элемента до 50% (25% левого поля + 50 ширина% оставляет эффективное 25% право край, таким образом, сначала центрируя нижний колонтитул) и установите выравнивание текста элемента нижнего колонтитула в центр, он будет центрировать нижние колонтитулы так, как вы хотите. Обратите внимание, однако, что это также устанавливает выравнивание текста дочерних элементов в центр, но в этом случае это похоже на то, что вы хотите.

footer { 
    margin-left: 25%; 
    width:50%; 
    text-align: center; 
}