對齊文本鏈接旁邊圖片鏈接

我有這些代碼：對齊文本鏈接旁邊圖片鏈接

<div class="col-md-12"> 
    <div class="parent"> 
    <a href="link.html"><img class="img-responsive" src="image.png">TEXT</a> 
    <a href="link.html"><img class="img-responsive" src="image.png">TEXT</a> 
    <a href="link.html"><img class="img-responsive" src="image.png">TEXT</a> 
    </div> 
</div>

而且它給我這個：

Output

我想文移動到圖像的右側。無論如何，我可以做到這一點，而無需刪除img-reponsive類？

我希望它是這樣的：

Output

來源

2016-07-07 Jayden

@ user3284463我編輯了我的代碼。文字應該在圖像之外。 – Jayden

.parent > a{ 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-12"> 
 
    <div class="parent"> 
 
    <a href="link.html"><img class="img-responsive" src="http://placehold.it/50x50">TEXT</a> 
 
    <a href="link.html"><img class="img-responsive" src="http://placehold.it/50x50">TEXT</a> 
 
    <a href="link.html"><img class="img-responsive" src="http://placehold.it/50x50">TEXT</a> 
 
    </div> 
 
</div>

來源

2016-07-07 09:02:29 Dmitriy

添加pull-left到的圖像會爲你工作：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<div class="col-md-12"> 
 
    <div class="parent"> 
 
    <a href="link.html" class="pull-left"><img class="img-responsive pull-left" src="//placehold.it/50?text=FB"> FB</a> 
 
    <a href="link.html" class="pull-left"><img class="img-responsive pull-left" src="//placehold.it/50?text=TW"> TW</a> 
 
    <a href="link.html" class="pull-left"><img class="img-responsive pull-left" src="//placehold.it/50?text=IN"> IN</a> 
 
    </div> 
 
</div>

或者，只是給其他類和將display設置爲inline-block。因爲，所有.image-responsive確實設置max-width和height與display: block;。

.img-responsive.inline-responsive {display: inline-block;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<div class="col-md-12"> 
 
    <div class="parent"> 
 
    <a href="link.html"><img class="img-responsive inline-responsive" src="//placehold.it/50?text=FB"> FB</a> 
 
    <a href="link.html"><img class="img-responsive inline-responsive" src="//placehold.it/50?text=TW"> TW</a> 
 
    <a href="link.html"><img class="img-responsive inline-responsive" src="//placehold.it/50?text=IN"> IN</a> 
 
    </div> 
 
</div>

注：正如我前面所說的，img-responsive增加block水平顯示爲<img />所以它不可能兼得img-responsive以及具有圖像的顯示inline ... :(

來源

2016-07-07 08:06:56

我編輯了代碼。圖像後應該有文字。我正在嘗試將文字放在圖片的右側。 – Jayden

@Jayden我也更新了我的解決方案。檢查？我會選擇第二個選項。 –

我試過這些代碼。它確實解決了這個問題，但無論如何，我可以做到不內聯圖像？我用我想要的結果編輯了我的問題，請看看。 – Jayden

對齊文本鏈接旁邊圖片鏈接

回答

相關問題