html - 居中 UL 但保持文本左对齐

标签 html css

<分区>

这是我想要实现的目标,文本居中但从同一点开始:

http://gi.zaley.in:8080/14/11/04/5459047ac35cd/N5459048577c8c.png

我得到的:

http://gi.zaley.in:8080/14/11/04/545904daf36ef/C545904df5f484.png

那么,文本很好地居中,但是我怎样才能让字幕从一个点开始呢? (如第一张图片)

<ul class="_unstyled_ _left_">
    <li>
        <a href="#" class="-avatar _round_ _normal">
            <figure class="-thumbnail">
                <img src="https://s3.amazonaws.com/uifaces/faces/twitter/krystalfister/128.jpg" alt="Krystalfister">
            </figure>
        </a>
        <p class="name">Random Guy</p>
        <p class="points">9 876 / 10 000 points</p>
    </li>
    <li>i hate</li>
    <li>goddamn</li>
    <li>markup</li>
    <li>go die</li>
</ul>

我没有在这里列出我的 CSS,因为它很明显只是 text-align: center;

最佳答案

做这样的事情:

ul {
    text-align: left;
    width: 100px;
}
li {
    background-color: #ff00ff;
    display: inline-block;
    width: 100px;
    padding: 0 20%;
    line-height: 30px;
}

jsfiddle

关于html - 居中 UL 但保持文本左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26740784/

上一篇:php - 重定向后页面未正确加载

下一篇:javascript - 我怎样才能在容器 div 中有一个带有固定页眉和页脚的可滚动主体?使用 jQuery

相关文章:

javascript - 如何在页面刷新之前将悬停状态保持在悬停状态?

css - 如何根据文本长度更改一些CSS属性

javascript - 上传图片到 Canvas

html - Phonegap/Cordova 应用程序在三星 Galaxy S4 等高分辨率设备上缩小得太小

html - css 显示内联和 float 不起作用

html - 禁用一些 css 规则

css - 在模态关闭 CSS 上添加 SlideDown 效果

javascript - 在 Chrome 扩展中插入图像?

jquery - 切换开关状态链接图标

html - 在 HTML 中链接 <img>