2016-11-07 7 views
1

私はHTMLで箇条書きのリストを作成しました。私はテキストと箇条書きのポイントを中心に配置しました。しかし、テキストを中央に置くと、テキストが左に一直線になるようにして、弾丸の点がずれることはありません。私がこれを行う方法はありますか? は、それが影響を受けることができるようにinline-blockとして表示するようにulを設定しテキストの左にテキストの中心とレベルを合わせるHTML

.l-section.wpb_row.height_auto.color_alternate { 
     text-align:center; 
    } 

.wpb_text_column p:last-child, .wpb_text_column ul:last-child, .wpb_text_column ol:last-child{ 
    list-style-position: inside; 
} 
+0

です:left –

+0

これはhttp://stackoverflow.com/questions/403の複製としてマークされています72065、しかし私は彼らが同じ質問ではないと思うので、私はそれを再開しました。私が間違っている場合のためにコメントにこれをリンクさせてください! –

+0

@ JamesDonnelly私が見る唯一の違いは、参照された投稿にはテキストが正しく整列されていることと、これが残っていることです。 –

答えて

3

私の箇条書きを中心に私のテキストをセンタリング休閑として私のCSSがある

enter image description here

外側の要素のtext-alignプロパティによって、それ自身に内側のリストのアイテムを揃えるleftからセット:

div { 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    display: inline-block; 
 
    text-align: left; 
 
}
<div> 
 
    <ul> 
 
    <li>Foo</li> 
 
    <li>Bar</li> 
 
    <li>Foobar</li> 
 
    </ul> 
 
</div>

0

が表示掲示板の一覧にtext-align: left;を追加します。あなたのUL要素と父親を超える

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
    li { 
 
     text-align: left; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 

 
<h4>An Unordered List:</h4> 
 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
</body> 
 
</html>

0

使用フレキシボックス:

 .father { 
      display: flex; 
      flex-direction: row; 
      flex-wrap: nowrap; 
      justify-content: space-around; 
      align-content: flex-start; 
     } 
     ul{ 
      display: flex; 
      flex-direction: column; 
      flex-wrap: nowrap; 
      justify-content: space-around; 
      align-content: flex-start; 
     } 
0

私はあなたがこの使用してCSSのフレキシボックスのプロパティを行うことができると思います。親へと速報のための中央のテキスト整列を追加:以下 は、テキスト整列を追加私のコード

HTMLコード

<h4>Heading</h4> 
<div class="container"> 
<ul> 
    <li>1st row</li> 
    <li>2nd row</li> 
    <li>3rd row</li> 
    <li>4th row</li> 
</ul> 

CSSコード

.container{display:flex; align-items:center;justify-content:center} 
h4{text-align:center;} 
関連する問題