Question

我有问题。我可以在不使用＆lt; .tr＆gt;＆lt; .td＆gt;的情况下显示两个图像。但使用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>

希望有人能在这里帮助我。提前谢谢。

Answer 1

这是一种更加语义化的方式：

<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>中）

Answer 2

以下是一个示例，说明如何将图像置于带有以下标题的div中。您还可以在每个块中添加链接或更多div和CSS。

http://jsfiddle.net/GVRk9/1/

在css中将2个图像连续居中

2 个答案: