首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将<ul> <li>居中放置到div中?

如何将<ul> <li>居中放置到div中?
EN

Stack Overflow用户
提问于 2009-11-10 21:43:50
回答 10查看 459.8K关注 0票数 92

如何将无序的<li>列表居中放置到固定宽度的div

代码语言:javascript
复制
<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com">    info@studioteknik.com</a></p></td>
  </tr>
  </tbody>
</table>

EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2009-11-10 21:48:29

由于ulli元素在缺省情况下都是display: block,因此将它们命名为auto margins and a width that is smaller than their container

代码语言:javascript
复制
ul {
    width: 70%;
    margin: auto;
}

如果您已经更改了它们的显示属性,或者做了一些覆盖正常对齐规则的操作(例如浮动它们),那么这将不起作用。

票数 145
EN

Stack Overflow用户

发布于 2018-06-17 07:00:56

我喜欢flexbox:

代码语言:javascript
复制
ul {
  justify-content: center;
  display: flex;
}
票数 50
EN

Stack Overflow用户

发布于 2009-11-10 21:48:48

可能是

代码语言:javascript
复制
div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

代码语言:javascript
复制
div li
{
text-align: center;
}

这取决于它应该是什么样子(或者组合它们)

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

https://stackoverflow.com/questions/1708054

复制
相关文章

相似问题

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