2

私はこのようなものを持っています:

[ [span][link]              ]

しかし、私はこのようなものが欲しいです:

[       [span][link]        ]

要素内の<span>and要素が水平方向の中央に配置されている場所<a><div>

spanおよびa要素には自動幅があります

divハードコーディングされた幅 250px

どうやってするか？

現在の CSS コードが機能していません。左側に中央寄せされています ;(:

a {
    margin: 0px; 
    padding: 0px;
    display: block;
    float: left;
    width: auto;
}

span {
    float: left;
}

div {
    display: inline;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

および HTML:

<div>
   <span>Name</span>
   <a href="#">Link</a>
</div>
4

2 に答える 2

2

使用inline-block 表示

<div class="outer">
   <span>Name</span>
   <a href="#">Link</a>
</div>

CSS:

span, a {
    display: inline-block;
}

.outer {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background: yellow;
    width: 500px;
    float:left;
}

jsFiddle デモ

于 2013-08-21T15:16:41.103 に答える
0

aとからフロートを削除しspan、代わりに div をフロートします。CSS を次のように置き換えてみてください。

a {
    margin: 0px; 
    padding: 0px;
}

div {
    text-align: center;
    width: 200px;
    float: left;
}
于 2013-08-21T15:25:41.213 に答える