右侧的 CSS 图像和文本

Question

我需要在图片旁边放一个文字.. 这是为显示图像而生成的 CSS 代码：

CSS：

#showbox {
list-style: none;
padding: 0;
width: 973;
height: 46px;
background: white repeat;
z-index: 12;
position: relative;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
    }
#showbox span {
display: none;
position: absolute;
}
#showbox a {
width: 100%;
display: inline;
text-indent: -900%;
position: absolute;
outline: none;
  }
  #showbox a:hover {
background-position: left bottom;
  }
   #showbox a:hover span{
display: inline;
  }
  #showbox .one {
width: 46px;
height: 46px;
top: 0px;
left: 0px;
background: url(images/cerchio1.png) no-repeat;
   }
   #showbox .two {
width: 46px;
height: 46px;
top: 0;
left: 240px;
background: url(images/cerchio2.png) no-repeat;
  }
    #showbox .three {
width: 46px;
height: 46px;
top: 0px;
left: 480px;
margin-right: 12px;
background: url(images/cerchio3.png) no-repeat;
    }
    #showbox .four {
width: 46px;
height: 46px;
top: 0px;
left: 720px;
margin-right: 12px;
background: url(images/cerchio4.png) no-repeat;
    }

---

HTML：

<div id="showbox">
<a class="one"></a>
<a class="two"></a>
<a class="three"></a>
<a class="four"></a>
</div>

---

如果我想要图片右侧的文字，我该怎么办？ 我必须为文本创建另一个框？ 这个图像代码是好的还是可以删除部分代码？谢谢

Answer 1

您的代码对我来说看起来很奇怪。我假设您想将图像用于链接，是吗？在这种情况下，我建议将您的 HTML 更改为：

<div id="showbox">
    <div class="one"><a><img src="images/img1.jpg"></a></div>
    <div class="two"><a><img src="images/img2.jpg"></a></div>
    <div class="three"><a><img src="images/img3.jpg"></a></div>
    <div class="four"><a><img src="images/img4.jpg"></a></div>
</div>

要在图像的最左侧添加文本，我们只需将其写出来：

<div id="showbox">
    <div class="one"><a><img src="images/img1.jpg"></a>Text</div>
    <div class="two"><a><img src="images/img2.jpg"></a>Text</div>
    <div class="three"><a><img src="images/img3.jpg"></a>Text</div>
    <div class="four"><a><img src="images/img4.jpg"></a>Text</div>
</div>

执行此操作，您应该能够使用此 CSS 获得所需的结果：

#showbox {
    padding: 0;
    width: 973;
    height: 46px;
    z-index: 12;
    position: relative;
}
#showbox .one {
    position:absolute;
    width: auto;
    height: 46px;
    top: 0px;
    left: 0px;
}
#showbox .two {
    position:absolute;
    width: auto;
    height: 46px;
    top: 0;
    left: 240px;
}
#showbox a, img {
    float:left;
}

我为了演示，我创建了this JSFiddle。我希望这会有所帮助！

编辑：

要将文本垂直放置在图像中间，我们需要稍微修改一下；垂直对齐并不是 HTML 最强大的一面。但这是可能的。

首先，您需要稍微编辑一下 CSS。对于每个类.one、.two、.three、.four，您需要添加

display:table-cell;
vertical-align:middle;

display:table-cell; vertical-align:middle; 确保将元素定位在垂直中间的框中，可以这么说。不幸的是，这还不够（我有没有提到垂直对齐不是 HTML 的强项？）。我们还需要添加

#showbox p{
    position:relative;
    float:right;
}

到 CSS。我们还将margin-right:5px; 添加到CSS 中的#showbox img,a 子句中：

#showbox a, img {
    float:left;
    margin-right:5px;
}

这是为了确保图片或链接右侧的所有 HTML 和文本都被移离图片或链接 5px。

最后，在 HTML 中，我们只需将文本放在 <p> 标签内，如下所示：

<div id="showbox">
    <div class="one">
        <a><img src="images/img1.jpg"></a>
        <p>Text</p>
    </div>
    <div class="two">
        <a><img src="images/img2.jpg"></a>
        <p>Text</p>
    </div>
    <div class="three">
        <a><img src="images/img3.jpg"></a>
        <p>Text</p>
    </div>
    <div class="four">
        <a><img src="images/img4.jpg"></a>
        <p>Text</p>
    </div>
</div>

为了演示，我已经updated the JSFiddle。