2

これを自分のページの中央に配置するのに問題があります。いくつかの調査を行ったところ、「インライン ブロック」を使用するのがよいようですが、実装方法がわかりません。

これが私のコードです：

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

tableとtable-cell の.bar内に別のdivを追加しました。テーブルが中央に配置され、セルがコンテンツの周りに縮小されています。 また、アニメーションの後でもホバーが機能するように、画像の余白をパディングに置き換え、浮き上がりを補うために padding-bottom を追加しました。

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 に答える
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 に答える