将文本项定位到中心列表

-1

我正在尝试修改我的网站主题。所有内容已经居中对齐。将文本项定位到中心列表

在这方面，我想对齐文本项目列表中心。下面是我正在使用的CSS：

.recent_news_css { 
    margin: auto; 
    width: 50%; 
    border: 3px solid green; 
    text-align: center; 
}

为了更容易理解，我也在这个div类的父级上绘制了一个红色边框。请参阅下面的屏幕截图。

我很惊讶地看到文字和圆点符号不是中心。有什么建议吗？

来源

2017-08-11 Ravi Joshi

这里是同样的问题和解决方案 https://stackoverflow.com/questions/19443013/how-to - 无序列表 –

如果它仍然不能解决，请提供小提琴/笔链接 – Panther

^^^或用相关的HTML样本更新您的问题 – Wh1T3h4Ck5

使用margin:0 auto;而不是自动。它会工作。

.recent_news_css { 
margin: 0 auto; 
width: 50%; 
border: 3px solid green; 
text-align: center; 
}

来源

2017-08-11 10:00:28

它没有工作。实际上，即使在使用'margin：0 auto'后，用户界面也没有变化。 –

两种方式都将'margin-left'和'margin-right'设置为'auto'。这种情况下的上下边距是无关紧要的，所以无关紧要的是'margin'属性的值'auto'或者'0 auto' – Wh1T3h4Ck5

这里是[js-fiddle]（https://jsfiddle.net/u4cvg5bk/）。 HTML由Drupal Framework生成。因此它太大了。我真的很抱歉它长的HTML和CSS。非常感谢你。 –

我认为li需要采取一切空间尝试

li{ 
width:100%; 
display:block; 
text-align: center; 
}

来源

2017-08-11 10:01:17

我添加了以下CSS。 '.recent-news-css {margin：0 auto; 宽度：50％; 边框：3px纯绿色; text-align：center; } .recent-news-css li { width：100％; display：block; text-align：center; } 。recent-news-css ul {text | align：center; } ' **不幸的是，它没有工作。** 请见截图[这里]（https://www.dropbox.com/s/3dgmklfeu70r2er/css.png?dl=0）这时间，我看不到子弹点符号。 –

在你的屏幕截图中，你没有添加'文本对齐：中心;'对你的文章 –

对不起。请看这个[链接]（https://www.dropbox.com/s/7r517hd47q0hvzb/new_li.png?dl=0） –

您是否在寻找somithing这样吗？

#parent{ 
    border: 3px solid red; 
    width:500px; 
} 

.recent_news_css { 
    margin: auto; 
    width: 100px; 
    border: 3px solid green; 
    text-align: center; 
    padding: 35%; 
} 


<body> 
    <div id="parent"> 
     <ul class="recent_news_css"> 
     <li> 
      some Text 
     </li> 
     <li> 
      some Text 
     </li> 
     <li> 
      some Text 
     </li> 
     </ul> 
    </div> 
</body>

https://jsfiddle.net/xm3qh3h8/

来源

2017-08-11 10:10:14 Bolphgolph

我加了下面的CSS。 '.recent-news-css {margin：0 auto; 宽度：50％; 边框：3px纯绿色; text-align：center; } .recent-news-css li { width：100％; display：block; text-align：center; } .recent-news-css ul { text-align：center; } ' **不幸的是，它没有工作。** 请看截图[这里]（https://www.dropbox.com/s/3dgmklfeu70r2er/css.png?dl=0） –

这里是[js-fiddle]（https://jsfiddle.net/u4cvg5bk/）。 HTML由Drupal Framework生成。因此它太大了。我真的很抱歉它长的HTML和CSS。非常感谢你。 –

因为你犯了一个div来的text-align：中心。

这是不可能的。你应该在li标签上添加样式“text-align：center”。

与此类似，见下文图像

enter image description here

.view-content ul li{ 
 
\t \t \t text-align: center; 
 
\t \t }

来源

2017-08-11 10:18:39 herozhou

这里是[js-fiddle]（https://jsfiddle.net/u4cvg5bk/）。 HTML由Drupal Framework生成。因此它太大了。我真的很抱歉它长的HTML和CSS。非常感谢你。 –

将文本项定位到中心列表

回答

相关问题