文章/答案/技术大牛

发布

社区首页 >问答首页 >将ul元素集中对齐

问将ul元素集中对齐
EN

Stack Overflow用户

提问于 2013-04-01 15:13:41

回答 1查看 93关注 0票数 3

我正试图将一个ul元素与其上方的头对齐。ul元素包括一个联系人信息列表(电子邮件、Twitter、rss等)。到目前为止，这就是我所拥有的：

这是通过以下代码实现的

html

<html>
<head>
    <meta charset="utf-8" />
    <title>Jing Xue - Portfolio</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Delius+Swash+Caps' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC:700' rel='stylesheet' type='text/css'>
</head>
<body>

<div class="header">
    <div class="wrapper">
    <h1>Portfolio of...</h1>    
    <h2>Jing Xue</h2>
    <ul class="intouch">
        <li class="twitter"><a href="">Twitter</a></li>
        <li class="rss"><a href="">RSS</a></li>
        <li class="email"><a href="">Email</a></li>
    </ul>
    </div>
</div>
</body>

css

body {
    background-color: rgb(255,255,255);
    color: rgb(59,67,68);
    margin: 0;
    padding: 0;
    font: 1em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
}

h1, h2, h3 {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.wrapper {
    width: 940px;
    margin: 0 auto 0 auto;
}

/* header ------------------------------------------------------------------ */

.header {
    text-align: center;
    padding: 40px 0 0 0;
    margin-bottom: 40px;
}

.header h1, .header h2 {
     margin: 0;
}

.header h1 {
    font-family: 'Delius Swash Caps', cursive;
    font-size: 250%;
    color: rgb(200,50,50);
}

.header h2 {
    font-family: 'Playfair Display SC', serif;
    font-size: 450%;
    color: rgb(59,67,68);
}


.intouch {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 0;
}

.intouch li a:link, .intouch li a:visited {
  padding: 0.5em 0 0.5em 40px;
  display: block;
  font-weight: bold;
  background-repeat: no-repeat;
  background-image: url(../img/sprite-roll.png);
  text-decoration: none;
  color: rgb(136,136,136);
}

.intouch li.twitter a:link, .intouch li.twitter a:visited {
  background-position: 0 6px;
}

.intouch li.twitter a:hover {
  background-position: 0 -90px;
  color: rgb(105,210,231);
}

.intouch li.rss a:link, .intouch li.rss a:visited {
  background-position: 0 -30px;
}

.intouch li.email a:link, .intouch li.email a:visited {
  background-position: 0 -60px;
}

.intouch li.twitter a:hover {
  background-position: 0 -90px;
  color: rgb(105,210,231);
}

.intouch li.rss a:hover {
  background-position: 0 -126px;
  color: rgb(243,134,48);
}

.intouch li.email a:hover {
  background-position: 0 -156px;
  color: rgb(56,55,54);
}

如您所见，.intouch ul类与其上方的标头没有中心地对齐。

我可以通过将margin-left: 425px;添加到.intouch类来实现中心对齐。它产生了这样的结果：

我想知道的是，是否有更好的方法来实现这个中心对齐，而不是仅仅添加一个左边距(根据李的文本长度，我必须改变左边距？)

html

css

回答 1

Stack Overflow用户

发布于 2013-04-01 15:49:31

从@Sparky注释开始，“如果没有宽度，就不能自动对某个内容进行居中。”我在.intouch中添加了一个宽度：

.intouch {
   list-style: none;
   margin: 0 auto;
   padding: 0;
  width: 110px;
}

这集中地对齐了.intouch。随着.intouch内容的改变，宽度属性将被调整，保持元素为中心。

票数 3

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

原文链接：

https://stackoverflow.com/questions/15746048

复制

相似问题

问将ul元素集中对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将ul元素集中对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将ul元素集中对齐
EN