对齐文本左侧的文本中心和级别HTML

我已经在HTML中创建了一个项目符号列表。然后，我将文本和要点集中在一起。但是，一旦我将文本居中，我希望文本在左边的一条直线上，所以我的项目符号点不会错开。有什么办法可以做到这一点吗？对齐文本左侧的文本中心和级别HTML

我的CSS是休耕围绕我的文字

.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; 
}

来源

2016-11-07 Craig Gallagher

添加文本对齐：中心于母公司并为公告添加文本对齐：左 –

这被标记为http://stackoverflow.com/questions/403的副本72065，但我重新打开它，因为我不认为它们是同一个问题。如果我错了，请在评论链接这里。 –

@JamesDonnelly我看到的唯一区别是被引用的文章有文本对齐，并且已经离开。 –

设置你的ul显示为inline-block以允许受影响由外部元素的text-align属性，然后给它自己的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>

来源

2016-11-07 11:42:21

添加text-align: left;所显示的公告列表。

<!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>

在你的UI元素和他的父亲

来源

2016-11-07 11:42:23 Nitheesh

使用Flexbox的：

 .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; 
     }

来源

2016-11-07 11:47:22 xale94

我认为你可以做到这一点使用CSS Flexbox的财产。下面是我的代码

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;}

来源

2016-11-07 11:48:17 Niraj

对齐文本左侧的文本中心和级别HTML

回答

相关问题