Sadece Bootstrap'ın CSS sınıflarını kullanarak bir resmi ortalamakta zorlanıyorum. Zaten birkaç şey denedim. Bunlardan biri img
öğesine Bootstrap CSS sınıfı mx-auto
eklemekti, ancak hiçbir şey yapmıyor.
Yardıma ihtiyacım var.
<div class="container">
<div class="row">
<div class="col-4 mx-auto">
<img class=""...> <!-- center this image within the column -->
<form...>
<p...>
<p...>
<p...>
</div>
</div>
</div>
Görüntü varsayılan olarak satır içi blok olarak görüntülenir, .mx-auto
ile ortalamak için blok olarak görüntülemeniz gerekir. Bu yerleşik .d-block
ile yapılabilir:
<div class="container">
<div class="row">
<div class="col-4">
<img class="mx-auto d-block" src="...">
</div>
</div>
</div>
Ya da inline-block olarak bırakın ve .text-center
ile bir div içine sarın:
<div class="container">
<div class="row">
<div class="col-4">
<div class="text-center">
<img src="...">
</div>
</div>
</div>
</div>
Her iki yolu da gösteren bir [fiddle][1] yaptım. Bunlar burada da belgelenmiştir.
img bir satır içi öğe olduğu için, kapsayıcısında text-center
kullanmanız yeterlidir. mx-auto` kullanımı kabı (sütunu) da ortalayacaktır.
<div class="row">
<div class="col-4 mx-auto text-center">
<img src="..">
</div>
</div>
Yalnızca görüntüyü ortalamak istiyorsanız (diğer sütun içeriğini değil), d-block
sınıfını kullanarak görüntüyü display:block
yapın ve ardından mx-auto
çalışacaktır.
<div class="row">
<div class="col-4">
<img class="mx-auto d-block" src="..">
</div>
</div>
img
yi ebeveyninin ortasına hizalamanın üç yolu.img
bir satır içi öğedir, text-center
satır içi öğeleri, kapsayıcının bir block
öğesi olması durumunda kabının ortasına hizalar.<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col text-center">
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid">
</div>
</div>
</div>
mx-auto
block
elemanlarını ortalar. Bunun için imgnin
displayini
inlinedan
blocka
d-block` sınıfı ile değiştirin.<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col">
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid d-block mx-auto">
</div>
</div>
</div>
d-flex
ve justify-content-center
kullanın.<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col d-flex justify-content-center">
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid">
</div>
</div>
</div>