5 Pertanyaan: vertical-align: middle with Bootstrap 2

pertanyaan dibuat di Mon, Jul 28, 2014 12:00 AM

Saya menggunakan bootstrap twitter dan saya ingin menyelaraskan secara vertikal blok div dengan gambar dan teks di sebelah kanan.

Ini kodenya:

 
<ol class="row" id="possibilities">
     <li class="span6">
         <div class="row">
             <div class="span3">
                 <p>some text here</p>
                 <p>Text Here too</p>
             </div>
             <figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
         </div>
     </li>
     <li class="span6">
         <div class="row">
             <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
             <div class="span3">
                 <p>Some text</p>
                 <p>Some text here too.</p>
             </div>
         </div>
     </li>
</ol>

Saya mencoba ini, tetapi tidak wortks:

 
.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}

Saya juga mencoba ini:

 
.span6 .row .span3{display: inline-block; vertical-align: middle;}

Tidak ada yang berfungsi. Apakah ada yang punya ide? Terima kasih sebelumnya.

    
31
  1. Bisakah Anda membuat jsfiddle.net demo?
    2012-07-21 13: 17: 04Z
  2. Termasuk bootstrap twitter membuat crash jsfiddle ... maaf
    2012-07-22 14: 00: 19Z
  3. "membuat jsfiddle crash" adalah pernyataan yang samar-samar.
    2012-07-22 14: 11: 14Z
  4. Ini adalah salah satu cara untuk mengatasi masalah bootstrap termasuk dalam jsFiddle: jsfiddle.net/api/post/library/pure
    2012-07-22 14: 12: 53Z
  5. 2012-07-22 14: 44: 40Z
5 Jawaban                              5                         

Coba ini:

 
.row > .span3 {
    display: inline-block !important;
    vertical-align: middle !important;
}

Edit:

Fiddle: http://jsfiddle.net/EexYE/

Anda mungkin perlu menambahkan Diego's float: none !important; juga jika span3 mengambang dan mengganggu.

Edit:

Fiddle: http://jsfiddle.net/D8McR/

Sebagai tanggapan terhadap Alberto: jika Anda memperbaiki ketinggian div baris, maka untuk melanjutkan perataan tengah vertikal, Anda harus mengatur tinggi-baris baris agar sama dengan tinggi piksel baris ( mis. keduanya 300px dalam kasus Anda). Jika Anda akan melakukan itu, Anda akan melihat bahwa elemen anak mewarisi tinggi-garis, yang merupakan masalah dalam kasus ini, jadi Anda kemudian perlu mengatur tinggi garis Anda untuk rentang3 ke apa pun yang seharusnya (1,5 adalah nilai contoh di biola, atau 1,5 x ukuran font, yang tidak kami ubah saat kami mengubah tinggi baris).

    
17
2013-10-29 22: 22: 31Z
  1. Bagaimana saya bisa mendapatkan ini bekerja dengan mengatur juga ketinggian div baris? jsfiddle.net/EexYE/191
    2013-10-29 15: 20: 17Z
  2. @ AlbertoPellizzon Lihat edit tambahan untuk kiriman di atas. Singkatnya, Anda harus mengatur tinggi baris div baris agar sesuai dengan tinggi yang Anda atur, misalnya. baik tinggi DAN garis-tinggi ke 300px. Maka untuk mencegah tipe dan gambar Anda ditampilkan secara tidak benar, Anda perlu mengatur ketinggian garis span3s menjadi apa pun nilai yang seharusnya, jika tidak maka hanya mewarisi 300px dari div baris.
    2013-10-29 22: 26: 06Z

Coba hapus atribut float dari span6:

 
{ float:none !important; }
    
4
2013-10-29 22: 07: 59Z

JikaSaya ingat benar dari penggunaan bootstrap saya sendiri, kelas .spanN melayang, yang secara otomatis membuat mereka berperilaku sebagai display: block. Agar display: table-cell berfungsi, Anda harus menghapus float.

    
0
2013-06-10 23: 10: 43Z

Selain jawaban sebelumnya, Anda selalu dapat menggunakan Tarik attrib juga:


 
    <ol class="row" id="possibilities">
       <li class="span6">
         <div class="row">
           <div class="span3">
             <p>some text here</p>
             <p>Text Here too</p>
           </div>
         <figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure>
        </div>
 </li>
 <li class="span6">
     <div class="row">
         <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
         <div class="span3">
             <p>Some text</p>
             <p>Some text here too.</p>
         </div>
     </div>
 </li>

    
0
2013-06-11 21: 07: 34Z

saya menggunakan ini

 
<style>
html, body{height:100%;margin:0;padding:0 0} 
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}   
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto} 
</style>
<body>
<div class="container-fluid">
     <div class="row-fluid">
     <div class="offset3 span6 centering">
            content here
         </div>
    </div>
 </div>
</body>
    
0
2013-06-19 21: 22: 43Z
sumber ditempatkan sini