div-dagi ro'yxat elementlarini qanday qilib markazlashtirish kerak?

Katta ekranda hoshiyalangan chap bo'lakdagi sahifa havolalari bor. Men ularni kichikroq ekranda hizalamoqni xohlayman. Chap chiziq kichikroq ekranda iflos ko'rinadi. Men ularni o'z ichiga olgan rasmda o'xshash tarzda markazlashtirmoqchiman. Mana mening jsfiddle

enter image description here

Mana shuni sinab ko'rdim

.footer-link{
margin: 20px 0;
margin-left: 15px;
}

.footer-link>ul>li{
margin: 10px 4.2% 10px 0%;
font-family: gotham_book;
font-weight: bold;
color: #424242;
font-size: 14px;
text-decoration: none;
text-align: left;
}

Men uni markazlashtirmoqchi bo'ldim. Lekin bu ishlamayapti. Men rasmda ko'rsatganimdek, ularni qanday markazlashtiraman.

<div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero">

     
      </div>
0
text-align: left; o'rniga text-align: center; ni qo'shing;
qo'shib qo'ydi muallif Immortal Dude, manba
siz markazni istagan element atrofida ham
tegidan foydalanishingiz mumkin
qo'shib qo'ydi muallif Kishan Oza, manba
bu satrni CSS .footer-link> ul {matn-align: center} -ga qo'shing
qo'shib qo'ydi muallif Hidayt Rahman, manba

8 javoblar

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.footer-link{
        margin: 20px 0;
        margin-left: 15px;
}

.footer-link>ul>li{
        margin: 10px 4.2% 10px 0%;
        font-family: gotham_book;
        font-weight: bold;
        color: #424242;
        font-size: 14px;
        text-decoration: none;
        text-align: left;
}
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero text-center">

              
          </div>
</div> </div>

Sizning talab qilingan bajarishingiz uchun faqat matn markazidan foydalaning. Bir marta ta'sirini faqat ekran kengligi kamida sinab ko'ring, aks holda u bitta qatorda.

0
qo'shib qo'ydi

Buni CSS kodingizga qo'shing.

.list-inline {   margin: 0 avto;   displey: stol; }

Bu elementni juda sezgir bo'ladi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.footer-link{
        margin: 20px 0;
        margin-left: 15px;
}

.footer-link>ul>li{
        margin: 10px 4.2% 10px 0%;
        font-family: gotham_book;
        font-weight: bold;
        color: #424242;
        font-size: 14px;
        text-decoration: none;
        text-align: left;
}
.list-inline{
  margin: 0 auto;
  display:table;
}
          <div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero">

              
          </div>
</div> </div>

0
qo'shib qo'ydi

Shunga o'xshash narsa?

ul.footer-links li{
font-family: gotham_book;
font-weight: bold;
color: #424242;
text-decoration: none;
text-align: center;
width: 30%;
padding: 0;
display: inline-block;
}

ul.footer-links li a{
font-size: 14px;
width: 100%;
padding: 0;
}

ul.footer-links {
width: 100%;
}
0
qo'shib qo'ydi

Only Add text-align: center; in ul Tag or .footer-link Class

.footer-link
{
  margin: 20px 0;
  margin-left: 15px;
  text-align: center;
}

Tahrirlangan Fiddle

Snippet

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.footer-link {
  margin: 20px 0;
  margin-left: 15px;
  text-align: center;
}

.footer-link>ul>li {
  margin: 10px 4.2% 10px 0%;
  font-family: gotham_book;
  font-weight: bold;
  color: #424242;
  font-size: 14px;
  text-decoration: none;
  text-align: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero">

  
</div>
</div> </div>

0
qo'shib qo'ydi

Buning uchun ommaviy axborot vositalaridagi so'rovlardan foydalanishingiz kerak

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

Sizga CSS-ni qo'shishingiz kerak

@media (max-width: 320px) {
 .footer-link>ul>li{
    text-align: center;
}
 }
}

Bu erda bir parcha

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.footer-link{
        margin: 20px 0;
        margin-left: 15px;
}

.footer-link>ul>li{
        margin: 10px 4.2% 10px 0%;
        font-family: gotham_book;
        font-weight: bold;
        color: #424242;
        font-size: 14px;
        text-decoration: none;
        text-align: left;
}
@media (max-width: 320px) {
 .footer-link>ul>li{
        text-align: center;
}
 }
}
          <div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero">

              
          </div>
</div> </div>

0
qo'shib qo'ydi

o'zgartirish.

.footer-link>ul>li{
margin: 10px 4.2% 10px 0%;
font-family: gotham_book;
font-weight: bold;
color: #424242;
font-size: 14px;
text-decoration: none;
text-align: left;

}

Ushbu kodni takrorlang

.footer-link>ul>li{
margin: 10px 4.2% 10px 0%;
font-family: gotham_book;
font-weight: bold;
color: #424242;
font-size: 14px;
text-decoration: none;
text-align: center;
}
0
qo'shib qo'ydi

Buni CSS-ga qo'shing

.footer-links{
    text-align:center;
}
0
qo'shib qo'ydi
Bu ishlay boshladi.
  • uchun emas, balki
      uchun hizalamak berdim. Bu mening xato. rahmat
  • qo'shib qo'ydi muallif Naveen Kumar, manba
    @NaveenKumar Javobni "javob" deb belgilang, shuning uchun hamma savolga javob berganligini biladi.
    qo'shib qo'ydi muallif DomeTune, manba

    you can use margin:auto if it doesn't work you will have to use media tags

    0
    qo'shib qo'ydi