Anhor yorlig'i ichidagi markaz tasvirini

Anchor yorlig'i ichidagi tasvirni markazlashtirish kerak. margin: 0 auto; ishlatilgan. Lekin ishlamadi.

Bu erda fiddle .

Men bootstrap va maxsus CSS dan foydalanaman.

0

6 javoblar

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

Bu bilan erishildi.

1
qo'shib qo'ydi
a.navbar-brand {
  text-align: center;
  display:    inline-table;
  position:   relative;
}

and if neccessary only remove the padding <div class="container-fluid" style="padding-bottom: 30px"> or make it padding-bottom:0;

Fiddle

thanks

1
qo'shib qo'ydi

Teg display: blok; kenglik: 100% ni tanlang va keyin margin: 0 auto bilan tasvirni o'rnating:

.navbar-brand {
  display:block;
  width:100%;
}
.navbar-brand img {
  margin:0 auto;
}

FIDDLE

0
qo'shib qo'ydi

Yuzini olib tashlash va ekranni o'rnatish: kirish yorlig'i va margin uchun blok: 0 auto img teg uchun ishlaydi.

.navbar-brand {
   display:block;
}
.navbar-brand img {
  margin: 0 auto;
}
0
qo'shib qo'ydi

"Navbar-marka" bootstrap sinfini olib tashlash va quyidagi sinf bilan almashtiring

https://jsfiddle.net/y0yL3gna/3/

   .class-name{
        text-align: center;
        display: block;
    }

Va html bo'ladi

<div class="wrapper">
<div class="container">
 
</div>
</div>
0
qo'shib qo'ydi

Men sizning uslubingiz bilan ba'zi HTML-larni o'zgartirdim. Buni ko'ring!

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

.wrapper {
  background: #ccc;
  padding-bottom: 10px;
}

.container {
  background-color: #FFF;
  box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);
}

.bgcol {
  /*background-color: #1d3179;*/
  background-color: #000000;
  border: #fff;
  color: fff
}

.bgcol .navbar-toggle .icon-bar {
  background-color: #FFF;
}

.bgcol a {
  color: #FFF;
}

.col_org {
  background: #1d3179;
}

.col_org:hover {
  background: #1d3179;
}
<div class="wrapper">
    <div class="container">
        
 
    </div>
</div>
</div> </div>

0
qo'shib qo'ydi