2

我无法将其集中在我的页面上，我已经进行了一些研究，似乎使用“inline-block”可能是要走的路，但我不确定如何实现它。

这是我的代码：

CSS

.bar img{
    float:left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.bar img:hover {
    margin-top: 2px;
}

HTML

<div align = "center">
    <img src = "images/wk5title.png">
</div>

<!--THIS IS WHAT IM TRYING TO CENTER-->
<div class = "bar" style="margin : auto; text-align: center">
    <a href = "fb.html"><img src="images/fb.png"></a>
    <a href = "tw.html"><img src="images/tw.png"></a>
    <a href = "li.html"><img src="images/li.png"></a>
    <a href = "da.html"><img src="images/da.png"></a>
</div>
4

2 回答 2

0

定义一个宽度，然后使用margin:auto你拥有的。这会自动将元素居中在页面的中心。您还应该真正更改<body background = "images/wk5bg.png" bgcolor = "#eeeeee">为使用 CSS。

body {
    background-image:url(image/wk5bg.png);
    background-color:#eeeeee;
}
div .bar {
    width:(your width here);
    margin:auto;
}
于 2012-07-15T17:28:05.767 回答
0

我在.bar中为table和table-cell添加了另一个div。表格居中，单元格围绕内容缩小。 此外，我用填充替换了图像边距，即使在动画之后也可以悬停，并添加了填充底部来补偿提升。

http://jsfiddle.net/ZW9YB/

<div align="center">
    <img src="images/wk5title.png" />
</div>

<!--THIS IS WHAT IM TRYING TO CENTER-->
<div class="bar"><div>
    <a href="fb.html"><img src="images/fb.png" /></a>
    <a href="tw.html"><img src="images/tw.png" /></a>
    <a href="li.html"><img src="images/li.png" /></a>
    <a href="da.html"><img src="images/da.png" /></a>
</div></div>

.bar img {
    float:left;
    display: block;
    padding: 15px;
    -webkit-transition: padding 0.5s ease-out;
    -moz-transition: padding 0.5s ease-out;
    -o-transition: padding 0.5s ease-out;
}

.bar {
    display: table;
    margin: 0 auto;
}

.bar > div {
    display: table-cell;
    background: #faa;
    overflow: hidden;
}

.bar:after {
    clear: both;
}

.bar img:hover {
    padding-top: 2px;
    padding-bottom: 28px;
}
于 2014-06-14T22:58:49.987 回答