Question

我有这段代码，文字正确居中。

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

Answer 1

为a：

添加宽度

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

DEMO HERE

Answer 2

试试这个http://jsfiddle.net/2P8Yj/18/

我已将display：table添加到body中，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。

Answer 3

将锚点设置为100％并根据需要添加一些填充：

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

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

Answer 4

试试这个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;
}

Answer 5

您可以将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/

Answer 6

在您的情况下，不确定将display: table-cell;更改为display: inline-block;是否正常。

但你可以用这个来达到同样的效果：

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

Demo

Answer 7

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

EXAMPLE

Answer 8

flaot:left;可能会解决您的问题。

垂直居中文字与图像

8 个答案: