bootstrap matnini va tasvirni o'rtada hizaladi

Bootstrap-da quyidagilar bo'lishi mumkin:

enter image description here

Shuning uchun matn va tasvirni sahifaning markazida bo'lishini xohlayman. Matnning o'ng tomonida o'ngga to'g'ri va chap tomonda rasm bo'lishi kerak Men div'lar bilan, keyin esa muvaffaqiyatsiz jadval bilan sinab ko'rdim.

Men sinab ko'rdim:


Mening kodim:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            
            
Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

</div> </div>

Edit The text should be aligned in the middle of the image and both should be in the center.

2
@ZimSystem Nima uchun bu takrorlanmoqda deb o'ylaysiz?
qo'shib qo'ydi muallif Vanko, manba

6 javoblar

MASLAHAT.

Matnni hizalamak uchun class = "img-responsive pull-right" va class = "text-left" dan foydalaning.

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

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

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
#text-left {
padding-top: 15%;

}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
#text-left {
padding-top: 25%;

}

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
#text-left {
padding-top: 30%;

}

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
#text-left {
padding-top: 35%;

}

}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           
           </head>
           <body>
          <div class="container">
    <div class="row">
        <div class="col-md-12">
            
            
Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. </div> </div> </body> </html>
</div> </div>

2
qo'shib qo'ydi
Matn rasmning o'rtasida emas
qo'shib qo'ydi muallif Vanko, manba
To'liq sahifada ishlamayapti
qo'shib qo'ydi muallif Vanko, manba
Mening fikrim float: chap va matn markazining kombinatsiyasi edi
qo'shib qo'ydi muallif Vanko, manba
o'rtada qilish uchun CSS-dan foydalaning .. yangilangan snippetni tekshiring
qo'shib qo'ydi muallif neophyte, manba
ommaviy axborot so'rovlarini ishlatib margin-to'plamni sozlang
qo'shib qo'ydi muallif neophyte, manba
Odatda yuqoridagi tarzda bajaraman - parchani tekshiring
qo'shib qo'ydi muallif neophyte, manba

MASLAHAT.

Matnni hizalamak uchun class = "img-responsive pull-right" va class = "text-left" dan foydalaning.

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

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

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
#text-left {
padding-top: 15%;

}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
#text-left {
padding-top: 25%;

}

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
#text-left {
padding-top: 30%;

}

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
#text-left {
padding-top: 35%;

}

}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           
           </head>
           <body>
          <div class="container">
    <div class="row">
        <div class="col-md-12">
            
            
Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. </div> </div> </body> </html>
</div> </div>

2
qo'shib qo'ydi
Matn rasmning o'rtasida emas
qo'shib qo'ydi muallif Vanko, manba
To'liq sahifada ishlamayapti
qo'shib qo'ydi muallif Vanko, manba
Mening fikrim float: chap va matn markazining kombinatsiyasi edi
qo'shib qo'ydi muallif Vanko, manba
o'rtada qilish uchun CSS-dan foydalaning .. yangilangan snippetni tekshiring
qo'shib qo'ydi muallif neophyte, manba
ommaviy axborot so'rovlarini ishlatib margin-to'plamni sozlang
qo'shib qo'ydi muallif neophyte, manba
Odatda yuqoridagi tarzda bajaraman - parchani tekshiring
qo'shib qo'ydi muallif neophyte, manba

Buni ko'ring

<div class="container">
<div class="row">
    <div class="col-md-6 text-right">
        
Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

</div> <div class="col-md-6 text-left"> </div> </div> </div>
1
qo'shib qo'ydi

Buni ko'ring

<div class="container">
<div class="row">
    <div class="col-md-6 text-right">
        
Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

</div> <div class="col-md-6 text-left"> </div> </div> </div>
1
qo'shib qo'ydi

Bootstrap grid tizimidan foydalanmoqchimisiz? Bunga o'xshash biror narsa sizning yechimingiz bo'lishi mumkin:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            
Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

</div> <div class="col-md-6"> </div> </div> </div>
1
qo'shib qo'ydi

Bootstrap grid tizimidan foydalanmoqchimisiz? Bunga o'xshash biror narsa sizning yechimingiz bo'lishi mumkin:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            
Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

</div> <div class="col-md-6"> </div> </div> </div>
1
qo'shib qo'ydi