Vertikal ravishda divning ichidagi paragrafni markazlashtira olmaydi

Menda paragraf bilan container div va tasvirni o'z ichiga olgan yana bir div bor. Paragrafning ham, divning ham ichki ko'rinishi bor. Men xatni vertikal tarzda qanday markazlashtirilganligini aniqlay olmayapman. vertical-align: middle dan foydalanib harakat qildim, ammo u ko'p ish qilmadi.

1
Konteyneringizda balandlik bo'lmasa, vertikal holda markazlashtira olmaysiz. Kodingizda konteyner balandligi

balandligi

qo'shib qo'ydi muallif AymDev, manba
Konteyneringizda balandlik bo'lmasa, vertikal holda markazlashtira olmaysiz. Kodingizda konteyner balandligi

balandligi

qo'shib qo'ydi muallif AymDev, manba
Konteyneringizda balandlik bo'lmasa, vertikal holda markazlashtira olmaysiz. Kodingizda konteyner balandligi

balandligi

qo'shib qo'ydi muallif AymDev, manba
shuning uchun ustunlar kerakmi? panjasida. rasm bilan bir va matn bilan birga? Siz bootstrap-ning col-md-6 dan foydalanmoqdasiz, lekin siz container yoki row CSS sinflarini to'g'ri ishlatmaysiz. bu yerda grid tizimiga qarang
qo'shib qo'ydi muallif Rico Kahler, manba
shuning uchun ustunlar kerakmi? panjasida. rasm bilan bir va matn bilan birga? Siz bootstrap-ning col-md-6 dan foydalanmoqdasiz, lekin siz container yoki row CSS sinflarini to'g'ri ishlatmaysiz. bu yerda grid tizimiga qarang
qo'shib qo'ydi muallif Rico Kahler, manba

8 javoblar

You need to set a height to your container (as I told you in comments).
And here is a method (among others) to vertically center with flex properties, no matter the container height.

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

.col-md-6 {
    height: 500px;
   //The container must be flexible
    display: flex;
}

.historic-story {
    font-size: 25px;
    text-align: center;
   //This is the property which centers
    align-self: center;
  }
<div id="historic-container" class="col-md-12">
  <div class="col-md-6">
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo in tellus ut varius. Etiam posuere ultricies maximus. Donec non turpis dolor. Donec erat nulla, mollis sit amet consectetur in, tempus vitae urna. Quisque elementum in felis eget pretium. Phasellus ultrices ligula ut consequat efficitur.

</div> <div class="col-md-6 historic-img-container"> </div> </div>
</div> </div>
0
qo'shib qo'ydi

You need to set a height to your container (as I told you in comments).
And here is a method (among others) to vertically center with flex properties, no matter the container height.

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

.col-md-6 {
    height: 500px;
   //The container must be flexible
    display: flex;
}

.historic-story {
    font-size: 25px;
    text-align: center;
   //This is the property which centers
    align-self: center;
  }
<div id="historic-container" class="col-md-12">
  <div class="col-md-6">
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo in tellus ut varius. Etiam posuere ultricies maximus. Donec non turpis dolor. Donec erat nulla, mollis sit amet consectetur in, tempus vitae urna. Quisque elementum in felis eget pretium. Phasellus ultrices ligula ut consequat efficitur.

</div> <div class="col-md-6 historic-img-container"> </div> </div>
</div> </div>
0
qo'shib qo'ydi

You need to set a height to your container (as I told you in comments).
And here is a method (among others) to vertically center with flex properties, no matter the container height.

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

.col-md-6 {
    height: 500px;
   //The container must be flexible
    display: flex;
}

.historic-story {
    font-size: 25px;
    text-align: center;
   //This is the property which centers
    align-self: center;
  }
<div id="historic-container" class="col-md-12">
  <div class="col-md-6">
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo in tellus ut varius. Etiam posuere ultricies maximus. Donec non turpis dolor. Donec erat nulla, mollis sit amet consectetur in, tempus vitae urna. Quisque elementum in felis eget pretium. Phasellus ultrices ligula ut consequat efficitur.

</div> <div class="col-md-6 historic-img-container"> </div> </div>
</div> </div>
0
qo'shib qo'ydi

You need to set a height to your container (as I told you in comments).
And here is a method (among others) to vertically center with flex properties, no matter the container height.

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

.col-md-6 {
    height: 500px;
   //The container must be flexible
    display: flex;
}

.historic-story {
    font-size: 25px;
    text-align: center;
   //This is the property which centers
    align-self: center;
  }
<div id="historic-container" class="col-md-12">
  <div class="col-md-6">
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo in tellus ut varius. Etiam posuere ultricies maximus. Donec non turpis dolor. Donec erat nulla, mollis sit amet consectetur in, tempus vitae urna. Quisque elementum in felis eget pretium. Phasellus ultrices ligula ut consequat efficitur.

</div> <div class="col-md-6 historic-img-container"> </div> </div>
</div> </div>
0
qo'shib qo'ydi

Marginlarni unuting. Bu faqat gorizontal ishlaydi. # Tarixiy konteyneringizning yuqori va pastki to'ldirishlarini bir-biriga tenglashtiring. 10% yuqori va pastki to'ldirishni sinab ko'ring. Vertikal hizalarni ham unuting.

0
qo'shib qo'ydi

Marginlarni unuting. Bu faqat gorizontal ishlaydi. # Tarixiy konteyneringizning yuqori va pastki to'ldirishlarini bir-biriga tenglashtiring. 10% yuqori va pastki to'ldirishni sinab ko'ring. Vertikal hizalarni ham unuting.

0
qo'shib qo'ydi

Marginlarni unuting. Bu faqat gorizontal ishlaydi. # Tarixiy konteyneringizning yuqori va pastki to'ldirishlarini bir-biriga tenglashtiring. 10% yuqori va pastki to'ldirishni sinab ko'ring. Vertikal hizalarni ham unuting.

0
qo'shib qo'ydi

Marginlarni unuting. Bu faqat gorizontal ishlaydi. # Tarixiy konteyneringizning yuqori va pastki to'ldirishlarini bir-biriga tenglashtiring. 10% yuqori va pastki to'ldirishni sinab ko'ring. Vertikal hizalarni ham unuting.

0
qo'shib qo'ydi