Question

我在浏览页面时遇到了麻烦，我做了一些研究，似乎使用“内联块”可能是要走的路，但我不确定如何实现它。

这是我的代码：

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>

Answer 1

定义宽度，然后使用您拥有的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;
}

Answer 2

我为表格和表格单元格在 .bar 中添加了另一个 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;
}

使包含浮动图像的DIV居中

2 个答案: