以圖片垂直居中文字

HTML

<div class="holder"> 
    <img src="http://placehold.it/100x150/" style="float: left;" /> 
    <a href="#" class="centered"> some text</a> 
</div>

CSS

.holder { 
    border: 1px solid red; 
    padding: 10px; 
    width: 300px; 
    display: table; 
} 
a { 
    display: table-cell; 
    vertical-align: middle; 
} 
img { 
    width: 100px; 
}

http://jsfiddle.net/2P8Yj/1/

我怎樣才能使對齊到左的文字，圖片旁邊？

enter image description here

來源

2014-05-14 Ivanka Todorova

-1

您可以添加position:relative和left:-80px到文字CSS。

EXAMPLE

來源

2014-05-14 11:23:26 SaturnsEye

爲什麼downvote？這工作正常 – SaturnsEye

這是一個非常骯髒的方式來處理左：-80px如果你不必。但我沒有倒下它;） – Drogon

-1

flaot:left;可能會解決你的問題。

來源

2014-05-14 11:24:48 Eligijus

甚至有一個JsFiddle附加。沒有「可能」要麼它或沒有，證明是在小提琴;-) – Potherca

寬度添加到您的一個：

a { 
    display: table-cell; 
    vertical-align: middle; 
    width:200px; 
}

DEMO HERE

來源

2014-05-14 11:26:15

完全相同的事情，我想發佈作爲答案:) –

+1這裏唯一的答案是在真正的問題點擊 – Abhitalks

試試這個的jsfiddle：JsFiddle

這是你的CSS的變化，發現我已經加入到.holder高度和行高到你a：

.holder { 
    border: 1px solid red; 
    padding: 10px; 
    width: 300px; 
    height:150px; 
    display: block; 
} 

a { 
    line-height:150px; 
    padding-left:20px; 
} 

img { 
    width: 100px; 
}

來源

2014-05-14 11:27:42 Drogon

您是否徹底檢查瞭解決方案？ http://jsfiddle.net/abhitalks/2P8Yj/21/？ – Abhitalks

哎喲，不是真的。我真的認爲這是一個簡短的文本，然後它會工作，但的確如果你創建一個更長的文本，它不會工作。 – Drogon

你可以把img和a每一個cell創建一個「正確」的表：

HTML：

<div class="holder"> 
    <div class="cell"> 
     <img src="http://placehold.it/100x150/" style="float: left;" /> 
    </div> 
    <div class="cell"> 
     <a href="#" class="centered"> some text</a> 
    </div> 
</div>

CSS：

.holder { 
    border: 1px solid red; 
    padding: 10px; 
    width: 300px; 
    display: table; 
} 

.cell { 
    display:table-cell; 
    vertical-align: middle; 
    text-align:left;  
} 

.cell:nth-child(1) { 
    width:105px; /*just to show, better to use padding for second cell*/ 
} 

img { 
    width: 100px; 
}

http://jsfiddle.net/2P8Yj/13/

來源

2014-05-14 11:27:58 Robin

爲什麼你想創建一個表，如果你不需要？ – Drogon

不知道將display: table-cell;更改爲display: inline-block;即可在您的位置通貨膨脹。

但是你可以完成與此相同的效果：

a { 
    display: inline-block; 
    vertical-align: middle; 
} 
img { 
    width: 100px; 
    display: inline-block; 
    vertical-align: middle; 
}

Demo

來源

2014-05-14 11:30:32

試試這個http://jsfiddle.net/2P8Yj/18/

我已經加入了顯示：表體的CSS如下

 body{display:table} 
     .holder { border: 1px solid red; padding: 10px; width: 300px;display: table-row;} 
     a { display: table-cell; 
     vertical-align: middle; } 
     img { width: 100px;}

而不是身體你可以有在它上面有更多的div。

來源

2014-05-14 11:30:47 SSS

請標記一些答案爲正確的答案，因爲它將從stackoverflow的未答覆隊列中移除問題。 – SSS

設置你的錨爲100％，如果需要添加一些填充：

a { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    padding-left: 15px; 
    }

演示：http://jsfiddle.net/2P8Yj/20/

來源

2014-05-14 11:31:51 Teknotica

+1實際上100％寬度更好 – Abhitalks

以圖片垂直居中文字

回答

相關問題