3

スパン テキストを中央 (垂直および水平) に配置するにはどうすればよいですか。私はjsfiddleの例を作成しました。これが私のコードです:

<ul>
    <li class="one"><span>One</span></li>
    <li class="two"><span>Two</span></li>
</ul>

CSS:

ul {
    height: 200px;
    border: 1px solid #000;
    width: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

li {
    height: 30px;
    width: 100%;
    position: absolute;
    background-color: blue;
}

.one {
    top: 30px;
    height: 50px;
}

.two {
    top: 150px;
}

li span {
    color: #fff;
    vertical-align: middle;
    height: 100%;
    display: block;
}

李の高さは変えることができます。上記は、固定高さを使用した単なる参考値です。

4

5 に答える 5

3

line-heightと同じ高さに設定する必要がありますli:

li span {
    color: #fff;
    vertical-align: middle;
    height: 100%;
    display: block;
    line-height:30px;
}
li.one span{
    line-height:50px;
}

ここにあなたのデモがあります: http://jsfiddle.net/r4Dr9/2/

于 2013-02-15T16:29:28.443 に答える
2

マージンやパディングでトリックを行う必要はありません。

aと<li>aを指定します。display:table;<span>display:table-cell;

デモ

追加するCSS

li {
    text-align:center;
    display:table;
}

li span {
    display:table-cell;
    vertical-align:middle;
}
于 2013-02-15T16:35:22.027 に答える
0

いくつかのこと。まず、height:100%;はvertical-align:middle;何もしません。また、width:100%;text-align を指定しても指定しなくても、デフォルトで常に左になります。私は個人的にパディングを使用します：

li span {
    display:inline-block;
    color: #fff;
    text-align:center;
    height: 100%;
}

.one span {
    padding-top:10px;
}

.two span {
    padding-top:3px;
}

jsFiddle も更新しました。

于 2013-02-15T16:28:07.003 に答える
0

で使用text-align: center;してみてくださいli span。上から下に移動するには、それぞれに応じて上余白を設定する必要があります。

于 2013-02-15T16:32:25.880 に答える