Bir altbilgideki merkezi div

Question

Web sitemin altbilgisinde yer alan bağlantıların bir listesini hizalamak istiyorum, ancak ne çalıştığım önemli değil, altbilginin ortasında hizalanmış gibi görünmüyor (örneğin, w3schools altbilgisinde örnek).

display: block, display: inline-block, text-align: center ve diğerlerini kullanmayı denedim ancak başkaları ne yaparsam yap bilmiyorum.

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> 

Herhangi bir yardım çok iyi olurdu, teşekkürler!

Answer 1

Altbilgide sadece display:flex; kullanın.

Answer 2

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

Bunu yapmak ister misiniz?

Answer 3

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>

deneyin Ekran Tablo

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

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

footer { 
    margin-left: 25%; 
    } 

Answer 4

% 50'ye altbilgi elemanının genişliğini ayarlarsanız (% 25 sol kenar boşluğu +% 50 genişliği etkili% 25 hakkını bırakır marjı, böylelikle altbilginin ilkini ortalar) ve altbilgi öğesinin metin hizalamasını ortalayacak şekilde, altbilgiyi dilediğiniz şekilde ortalayacak. Bununla birlikte, bunun, çocuk öğelerinin metin hizalamasını da ortalayacağını unutmayın, ancak bu durumda istediğiniz gibi görünür.

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