首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >中间对齐Li使用文本对齐:中心不工作

中间对齐Li使用文本对齐:中心不工作
EN

Stack Overflow用户
提问于 2015-08-13 03:08:35
回答 2查看 860关注 0票数 0

我有一堆里有超链接的。下面是一个演示http://codepen.io/anon/pen/aOxJyr

代码语言:javascript
运行
复制
<div class="collapse navbar-collapse" id="categorycollapse">
    <ul id="Category" class="row list-inline  nav navbar-nav">      
        <li>
            <a href="/products/Category/Cars">
                Cars
            </a>
        </li>

        <li>
            <a href="/products/Category/Cars%20R">
                Cars R
            </a>
        </li>

        <li>
            <a href="/products/Category/Bus">
                Bus
            </a>
        </li>

        <li>
            <a href="/products/Category/Bus">
                Bus
            </a>
        </li>

        <li>
            <a href="/products/Category/Tempo">
                Tempo
            </a>
        </li>

        <li>
            <a href="/products/Category/Cycle">
                Cycle
            </a>
        </li>

        <li>
            <a href="/products/Category/Jet">
                Jet
            </a>
        </li>   
    </ul>
</div>

对于这些列表项,我使用了以下CSS来对齐中心,对齐它们为。但是看起来其他一些css属性正在覆盖我的设置,而li的设置则是左对齐的。检查底部最左对齐的行。

代码语言:javascript
运行
复制
#Category {
    border:1px solid #C4C6C6;
    margin: 0 60px 0 60px;
    padding: 20px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    text-align: center !important;
}

#Category > li {
    font-family: 'Open Sans',sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-top: 15px;
    margin-left: 20px;
    padding: 0 0 20px;
    display: inline-block;
}


#Category li a, ol li a {
 background-color: #07575B;
  color: #FFFFFF;
        transition: background .2s ease-in;
    -o-transition: background .2s ease-in;
    -moz-transition: background .2s ease-in;
    -webkit-transition: background .2s ease-in;
        padding: 10px 10px;
    border-radius: 3px;
    font-size: 14px !important;
    display: inline !important;
}

如何将列表居中对齐,使其覆盖所有css设置。对于中间对齐,我的意思是如果元素跨越两行,而第二行只有3个元素,那么这些元素必须是中心对齐而不是左对齐。

更新:收到了。问题在于我在类别上应用的属性navbar nav,该属性是对元素进行调整的。我把它拿走了。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-08-13 03:11:55

我尝试过将这些CSS属性添加到您的UI中,它可以解决这个问题;

代码语言:javascript
运行
复制
#Category > ul {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

查看链接并通知我;

Nav对准

更新:

如果您期待第二行对齐,请从您的text-align:left !important中删除#category并添加text-align:center,请查看此jsfiddle:

肚脐

票数 0
EN

Stack Overflow用户

发布于 2015-08-13 03:27:28

运行OSX。刚刚检查了你的代码在Chrome,Firefox和Safari。每一个中心都是。您是否正在使用IE作为浏览器?

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31978860

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档