html - CSS - 在不改变 HTML 的情况下重新定位元素

Question

在我的一生中，我无法让它按照我想要的方式工作。我在链接中有一个图像，在文本周围有一个跨度。我想要做的就是让图像 float 到文本的右侧，并且文本在它旁边垂直居中对齐。我不能更改标记，图像可以是任何大小，所以简单地使用 margin-top 是行不通的。

JS fiddle :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;
}

Answer 1

实际上垂直对齐可以简单地通过给行内级元素 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>