Saya mencoba menata konten judul modal. Ini akan berisi gambar tengah, dan dua kolom kecil yang berisi 1 atau 2 tombol/gambar. Saya ingin semuanya selaras secara vertikal dan horizontal. Ukuran gambar tengah bervariasi. Sepertinya pekerjaan untuk flexbox. Dalam kode saya yang sebenarnya, konten #headerLHS/#headerRHS/#myModalLabel disetel secara dinamis
<div class="modal-title row" id="headerBox" class="container-fluid">
<div id="headerLHS" class="col-xs-3"><img id="lhs"/></div>
<div id="myModalLabel" class="col-xs-6"></div>
<div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
</div>
Sejauh ini css saya adalah:
#headerLHS,#headerRHS {
display: flex; webkit-display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
padding: 0px;
justify-content: space-around;
align-items: center;
}
Tapi ini tidak berhasil. Sepertinya saya perlu menata gaya pada #lhs dan #rhs tetapi saya tidak tahu apa yang seharusnya. Saya telah bermain-main dengan segala macam markup kotak fleksibel, tetapi tidak berhasil. Dapatkah seseorang membantu.
Terima kasih.