如何向左浮动/对齐图像和向右居中文本（反之亦然）

Question

我正在努力处理一些代码，我试图将图像对齐/浮动到列行的一侧，并将文本浮动/居中到另一侧。发生的事情是图像没有一直向右浮动。当文本居中时，文本也不能正确对齐。

我似乎无法附上图片。您可以通过导航到我的网站“yukionna.com”并将图像名称添加到 url 来查看图像：css_problem_01.jpg

这是我的代码：

CSS：

.tn-container {
  height: 100px;
  background: #fff;
}
.tn-span {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border-bottom:1px solid #ccc;  
} 
.tn-left img {
  float:left;
  width:110px;
  height:90px;
  margin:5px;
  text-align:right;
}
.tn-right img {
  float:right;
  width:110px;
  height:90px;
  margin:5px;
  text-align:left;
}

HTML：

<!-- row 1  -->     
<div class="tn-container tn-left">
    <div class="tn-span">
        <img src="..." alt="">
        Row 1 text
    </div>
</div>

<!-- row 2  --> 
<div class="tn-container tn-right">
    <div class="tn-span">
        <img src="..." alt="">
        Row 2 text
    </div>
</div>

<!-- row 3  --> 
<div class="tn-container tn-left">
    <div class="tn-span">
        <img src="..." alt="">
        Row 3 text
    </div>
</div>

<!-- row 4  --> 
<div class="tn-container tn-right">
    <div class="tn-span">
        <img src="..." alt="">
        Row 4 text
    </div>
</div

Answer 1

尝试将width: 100% 添加到.tn-span 样式。这应该要求跨度占据整个可用宽度（因此“正确”右对齐您的图像）。见this example。