Question

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

似乎我无法附加图像。您可以通过导航到我的网站“yukionna.com”并将图像名称添加到网址来查看图像：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。

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

1 个答案: