web-dev-qa-db-ja.com

小さい箇条書きを大きいテキストに垂直に揃える

箇条書きのリストがあります。 liテキストをspan内に配置し、liのフォントサイズをスパンのフォントサイズよりも小さくすることで、箇条書きを小さくしました。問題は、箇条書きがテキストに対して垂直方向に配置されていないことです。どうすれば修正できますか？

HTML：

<ul>
    <li><span>text1</span></li>
    <li><span>text2</span></li>
    <li><span>text3</span></li>
    <li><span>text4</span></li>
</ul>

CSS：

li{
    font-size: 15px;
}
li span{
    font-size: 25px;
}

jsFiddle： http://jsfiddle.net/tXzcA/

csslistvertical-alignmentfont-size
17
dmr

独自の箇条書きを作成して、任意のサイズにすることができます。

li{
  font-size: 15px;
  list-style-type:none;

}
li span{
  font-size: 25px;
}

ul li:before {
   content: "•";
   font-size: 80%;
   padding-right: 10px;
}

font-sizeの周りを必要なサイズに変更するだけです。

jsFiddle

8
Jason

これを試して：

li span{
  font-size: 25px;
  vertical-align:middle;
  padding-bottom:5px;
}

ここでそれを参照してください： http://jsfiddle.net/tXzcA/19/

10
Brian Salta

これは私が使用したものであり、弾丸とコンテンツの両方を中心にしています

Jsfiddle： http://jsfiddle.net/VR2hP/14/

CSS：

ul {
  padding-left: 5em;
  list-style: none;
}

li.Twitter::before,
li.fb::before {    
  font-family: 'FontAwesome';
  margin: 0 .2em 0 -1.5em;
  font-size: 3em;
  vertical-align: middle;
}

li.Twitter::before {
  content: '\f081';
}

li.fb::before {
    content: '\f082';
}

li {
  list-style-type: none;
}

li span {
  display: inline-block;
  vertical-align: middle;
}
6
MartinC

順序付けされていないリストを使用して、リストアイテムをテーブルとして表示します。

この例を見てください： https://jsfiddle.net/luenib/jw1ua38v/

アイコン、番号、または配置したいものはすべて、スパン内に配置されます。スパンのコンテンツは水平方向と垂直方向の中央に配置されます。アイコンを上部に表示したくない場合に非常に便利です。段落内のテキストは左側にスペースを保持するため、テキストが複数行に及ぶ場合にアイコンの下に表示されることはありません。

CSS：

ul {
  padding-left: 0;
}

li {
  display: table;
}

li span {
  width: 40px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

HTML：

<ul>
  <li><span>1</span>
    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
  </li>
  <li><span>2</span>
    <p>Some text here. Some text here. Some text here.</p>
  </li>
</ul>
2
luenib