Listelerdeki metin nasıl ortalanır?

Question

w3schools 4 sütun üstbilgisinde esinlenerek bir Web sitesi altbilgi oluşturmaya çalışıyorum, ancak, li etiketlerindeki metin sağa doğru (başlıklara kıyasla) azar azar gider.

CSS:

html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    margin: 0 0 100px; 
} 

footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
} 

#footer { 
    width: 100%; 
    margin: auto; 
} 

.footerFloat { 
    width: 100%; 
} 

@media all and (min-width: 950px) { 
    #footer { 
    width: 980px; 
    margin: auto; 
    } 
    .footerFloat { 
    width: 25%; 
    float: left; 
    display: block; 
    } 
} 

#wrapper { 
    width: 100%; 
    overflow: hidden; 
} 

ul { 
    list-style: none; 
} 

.center { 
    text-align: center; 
} 

HTML: İşte

<header></header> 
<footer> 
    <div id="wrapper"> 
    <div id="footer"> 
     <div class="footerFloat"> 
     <h4 class="center">Header 1</h4> 
     <ul> 
      <li class="center">Line 1</li> 
      <li class="center">Line 2</li> 
      <li class="center">Line 3</li> 
      <li class="center">Line 4</li> 
     </ul> 
     </div> 
     <div class="footerFloat"> 
     <h4 class="center">Header 4</h4> 
     <ul> 
      <li class="center">Line 1</li> 
      <li class="center">Line 2</li> 
      <li class="center">Line 3</li> 
      <li class="center">Line 4</li> 
     </ul> 
     </div> 
     <div class="footerFloat"> 
     <h4 class="center">Header 3</h4> 
     <ul> 
      <li class="center">Line 1</li> 
      <li class="center">Line 2</li> 
      <li class="center">Line 3</li> 
      <li class="center">Line 4</li> 
     </ul> 
     </div> 
     <div class="footerFloat"> 
     <h4 class="center">Header 4</h4> 
     <ul> 
      <li class="center">Line 1</li> 
      <li class="center">Line 2</li> 
      <li class="center">Line 3</li> 
      <li class="center">Line 4</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</footer> 

sorunun picture olduğunu.

Bunu nasıl düzeltebileceğimi bilen var mı ve metni altbilgideki başlıklar ile mi ortalayın?

Herhangi bir yardım çok takdir edilecektir, teşekkürler.

Answer 1

varsayılan olarak ul yerleşik dolguyu kaldırın -ItzJavaCraft.

 
     .footerFloat { 
 
     width: 25%; 
 
     float: left; 
 
     } 
 
     #wrapper { 
 
     width: 100%; 
 
     overflow: hidden; 
 
     } 
 
     ul { 
 
     list-style: none; 
 
     padding: 0; /* here---add this */ 
 
     } 
 
     .center { 
 
     text-align: center; 
 
     }

<footer> 
 
    <div id="wrapper"> 
 
    <div id="footer"> 
 
     <div class="footerFloat"> 
 
     <h4 class="center">Header 1</h4> 
 
     <ul> 
 
      <li class="center">Line 1</li> 
 
      <li class="center">Line 2</li> 
 
      <li class="center">Line 3</li> 
 
      <li class="center">Line 4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerFloat"> 
 
     <h4 class="center">Header 4</h4> 
 
     <ul> 
 
      <li class="center">Line 1</li> 
 
      <li class="center">Line 2</li> 
 
      <li class="center">Line 3</li> 
 
      <li class="center">Line 4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerFloat"> 
 
     <h4 class="center">Header 3</h4> 
 
     <ul> 
 
      <li class="center">Line 1</li> 
 
      <li class="center">Line 2</li> 
 
      <li class="center">Line 3</li> 
 
      <li class="center">Line 4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerFloat"> 
 
     <h4 class="center">Header 4</h4> 
 
     <ul> 
 
      <li class="center">Line 1</li> 
 
      <li class="center">Line 2</li> 
 
      <li class="center">Line 3</li> 
 
      <li class="center">Line 4</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</footer>