以图片垂直居中文字

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

以图片垂直居中文字

回答

相关问题