html - CSS-重新定位元素而不更改HTML

为了我的生活，我不能让这个工作，我想。我在一个链接中有一个图像，在文本周围有一个跨度。我所要做的就是让图像浮动到文本的右侧，文本在文本旁边垂直居中对齐。我不能改变标记和图像可以是任何大小，所以简单地使用页边空白顶部将不起作用。
JS小提琴：http://jsfiddle.net/sppbe4j5/
HTML格式：

<div>
 <a href="#">
    <img src="http://placehold.it/350x150">
    <span>Some Text</span>
 </a>
</div>

CSS:

div{ display: table; }

a img {
  display: table-cell;
  float:right;
}

a {
  display: table-cell;
}

a span{
    vertical-align: middle;
    text-align: center;
}

最佳答案

实际上，垂直对齐可以简单地通过将vertical-align: middle赋予内联级别元素、img和span来完成。
因此，真正的问题是如何在不改变HTML的情况下重新排列元素的位置。
就我个人而言，如果可能的话，我会采用Flexbox布局。然而，如果支持IE9是一个问题，您可以使用CSS转换来伪造效果。只需顺时针旋转容器，逆时针旋转单个元件或反之亦然。
Example Here

a.container {
    display: inline-block;
    transform: rotate(180deg);
    text-decoration: none;
}

a.container img, a.container span {
    vertical-align: middle;
    display: inline-block;
    transform: rotate(-180deg);
}

由于简洁，省略了Verndor前缀。

a.container {
    display: inline-block;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    text-decoration: none;
}

a.container img, a.container span {
    vertical-align: middle;
    display: inline-block;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

<div>
    <a href="#" class="container">
        <img src="http://placehold.it/350x150" />
        <span>Some Text</span>
    </a>
</div>