1

まず、私の CSS スキルは... 進行中です。しかし、私はこれまでのところ、一連のリスト項目をグリッドに配置することに成功しています。http://jsfiddle.net/ashanova/Y4SR3/2/

私が今やりたいことは、リスト項目を中央に配置することです。に置き換えようとしましfloatたinlineが、各項目のwidthandheightが崩れます。また、各リスト項目内でテキストを水平方向および垂直方向にも中央揃えにしたいと思います。理想的には、(単語ではなく) オーバーフロー テキストを省略します。ul最後の仕様として、可能な場合は CSS とその子のみを変更したいと思います。

4

4 に答える 4

2

複数の親要素と子要素を扱っていて、2 つの軸を中心に (/middling) していると、言語が少し不明確になりますが、他の答えが探しているものではない場合、実際にはdisplay: table-cell.

このフィドルを確認してください。

li要素を指定するとdisplay: table-cell、テキストが適切に配置されると思います。残念ながら、 要素はマージンを受け入れないため、代わりに 10 ピクセルの境界線を追加しました。text-align: centervertical-align: middletable-cell

はみ出したテキストの切り捨てと楕円の挿入を行うには、何らかの JavaScript を使用する必要があります。

アップデート

他の多くの回答やコメントを通じてあなたが何を求めているかについてもっと学んだので、私はここでより良い解決策を考え出しました: http://jsfiddle.net/crowjonah/jx8sD/

必要なことは<a class="list-item">、要素内にタグを挿入し、次のliCSS を使用することです。

.tile li {
    background-color: white;
    display: block;
    float: left;
    margin: 10px;
    overflow: hidden;
}
.tile li a.list-item{
    display: table-cell;
    vertical-align: middle;
    height: 75px;
    text-align: center;
    width:75px;

}
于 2012-09-20T14:16:52.917 に答える
0

Text-align: centerリストアイテムを中央に揃えます。Vertical-align: text-topアイテムを中央に垂直に配置します。

于 2012-09-20T14:05:25.520 に答える
0

vetical-alignこの場合、実際には機能しません。そんなに単純だったらいいのに。

この記事は、問題に対する洞察を提供し、解決するのに役立ちます。

垂直方向の配置、または「コンテンツを垂直方向に中央揃えにする (しない) 方法」を理解する

于 2012-09-20T14:12:23.077 に答える
0

これはあなたが望むことをします。インライン ブロック アイテムの枠線は面倒なので、見栄えを良くするために枠線を使用しています。

.tile li {
    background-color: white;
    display:inline-block;
    border: 10px solid red;
    width: 75px;
    height: 75px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    overflow: hidden;
}
于 2012-09-20T14:16:53.733 に答える