我有个问题。我能够在不使用<的情况下显示两个图像;。tr><。td>,但使用div元素。我还希望它在我的页面中居中。但是居中的部分我不知道。我已经附上了我的css和html代码,所以任何人都可以尝试。
我的html
<div style='align:center;'>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img class="images" src="/assets/images/e_mail.png" alt="..." width="110" height="90" >
</a>
<div class="desc">E-mail</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img class="images" src="/assets/images/sns.png" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">SNS</div>
</div>
<div style="clear:both;"></div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img class="images" src="/assets/images/promo.png" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Promos</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img class="images" src="/assets/images/whats_hot.png" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">What's Hot?'</div>
</div>
</div>
我的样式/css
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
希望这里有人能帮助我。提前谢谢。
这里有一种更具语义的方法:
<ul class="menu">
<li class="email"><a href="klematis_big.htm">E-Mail</a></li>
<li class="sns"><a href="klematis2_big.htm">SNS</a></li>
<li class="promo"><a href="klematis3_big.html">Promos</a></li>
</ul>
和
.menu {
list-style-type: none outside;
padding: 0; margin: 0;
text-align: center;
}
.menu li { display: inline; }
.menu a {
min-width: 110px;
padding-top: 95px;
display: inline-block;
background: 50% 0 no-repeat;
}
.menu a:hover, .menu a:focus {
background-color: yellow;
}
.menu .email a {
background-image: url(/assets/images/e_mail.png);
}
.menu .sns a {
background-image: url(/assets/images/sns.png);
}
.menu .promo a {
background-image: url(/assets/images/promo.png);
}
这将内容和设计分开:原始代码中的图像仅用于设计,而不是内容,因此它们应该在CSS中定义。此外,人们希望能够点击文本和图标,而不仅仅是一个。如果在<li>
之间不留空格,则可以创建一个更好的工具栏,而在按钮之间没有空格。使用一个列表而不是一堆<div>
将有助于搜索引擎和屏幕阅读器更好地理解内容(如果您使用HTML5,可能应该将其全部封装在<nav>
中)
下面是一个如何将图像居中放置在标题如下的div中的示例。您还可以在每个块中添加链接或更多div和CSS。
http://jsfiddle.net/GVRk9/1/