html - 右边的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。对于每个类(class) .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;到 #showbox img,a CSS 中的子句:

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

这是为了确保图像或链接右侧的所有 HTML 和文本都移动到距图像或链接 5 像素的位置。

最后，在 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 .