我沒(méi)有得到這個(gè)圖像垂直居中......<div class="col-lg-6 d-flex flex-column justify-content-center"> <h4><strong>Help</strong></h4> <blockquote><p class="description" style="font-size: 14px;"> Als er op een pagina een <i class="fas fa-question-circle"></i> staat en u gaat daar met de muis op staan komt er een overzicht tevoorschijn met de mogelijkheden van de betreffende pagina. </p></blockquote> <h4><strong>Bewerken</strong></h4> <blockquote><p class="description" style="font-size: 14px;"> Via de knop <button type="button" class="btn btn-xs" title="Voeg toe"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> kan er een nieuw item worden toegevoegd aan de huidige pagina.<br /> Als er gegevens kunnen worden gewijzigd is dit zichtbaar door een <abbr title="">stippellijn</abbr> onder de bewuste tekst. Het kan zijn dat de bewerkmodus eerst moet worden ingeschakeld via de knop <input type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger"> op de bewuste pagina. </p></blockquote></div><div class="col-lg-6"> <img src="img/portfolio/torza/002.jpg" class="img-fluid" alt="Torza"></div>我嘗試添加style="display: inline-block; height: 100%; vertical-align: middle;"到兩者中div。還嘗試了class vcenter，我什至將其額外添加到css以確保。.vcenter { display: inline-block; vertical-align: middle; float: none;}有什么建議么？
3 回答
千巷貓影
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊
不要認(rèn)為 CSS 在這里是必要的。請(qǐng)嘗試將mt-auto mb-auto類添加到 img 或帶有 class 的第二個(gè) div 中col-lg-6。
慕妹3242003
TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊
如果您希望 img 相對(duì)于左側(cè)內(nèi)容居中。
將整個(gè)東西包裹在一個(gè) Flex 容器中并添加align-self: center;到 img 容器上，現(xiàn)在只要右側(cè)容器比左側(cè)容器短，居中就可見(jiàn)。
.flex {
display: flex;
flex-direction: row;
}
.vcenter {
align-self: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex">
<div class="col-lg-6 d-flex flex-column justify-content-center">
<h4><strong>Help</strong></h4>
<blockquote>
<p class="description" style="font-size: 14px;">
Als er op een pagina een <i class="fas fa-question-circle"></i> staat en u gaat daar met de muis op staan komt er een overzicht tevoorschijn met de mogelijkheden van de betreffende pagina.
</p>
</blockquote>
<h4><strong>Bewerken</strong></h4>
<blockquote>
<p class="description" style="font-size: 14px;">
Via de knop <button type="button" class="btn btn-xs" title="Voeg toe"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> kan er een nieuw item worden toegevoegd aan de huidige pagina.<br /> Als er gegevens kunnen worden
gewijzigd is dit zichtbaar door een <abbr title="">stippellijn</abbr> onder de bewuste tekst. Het kan zijn dat de bewerkmodus eerst moet worden ingeschakeld via de knop <input type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>"
data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger"> op de bewuste pagina.
</p>
</blockquote>
</div>
<div class="col-lg-6 vcenter">
<img src="https://picsum.photos/100/100" class="img-fluid" alt="Torza">
</div>
</div>
隔江千里
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超10個(gè)贊
在圖像 div 中，添加這些樣式
display:flex;justify-content:center;align-items:center;
所以它會(huì)變成
<div class="col-lg-6" style="display:flex;justify-content:center;align-items:center">
<img src="img/portfolio/torza/002.jpg" class="img-fluid" alt="Torza">
</div>
- 3 回答
- 0 關(guān)注
- 152 瀏覽
添加回答
舉報(bào)
0/150
提交
取消