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。

CSS图像和文本在右侧

1 个答案: