Html 中心对准ul元件_Html_Css - Fatal编程技术网

Html 中心对准ul元件

html css

Html 中心对准ul元件,html,css,Html,Css,我试图将一个ul元素与上面的标题对齐。ul元素包括一个联系人信息列表（电子邮件、Twitter、rss等）。这就是我到目前为止所做的：这是通过以下代码实现的 html <html> <head> <meta charset="utf-8" /> <title>Jing Xue - Portfolio</title> <link rel="stylesheet" href="css/normalize.c

我试图将一个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>

正如您所看到的，.intouch ul类相对于其上方的标题没有居中对齐

我可以通过添加

左边距：425px来实现中心对齐到.intouch类。这就产生了：

我想知道的是，有没有更好的方法来实现这种居中对齐，而不是仅仅添加一个左边距（我必须根据li中文本的长度进行更改？
从@Sparky comment开始，如果没有宽度，则无法自动居中）。我已经为intouch添加了一个宽度：
.intouch {
   list-style: none;
   margin: 0 auto;
   padding: 0;
  width: 110px;
}

这一点与intouch完全一致。随着.intouch内容的更改，将重新调整width属性，使元素居中
 你能提供一个实时站点或JSFIDLE吗？您是否尝试过边距：0自动；？如果没有宽度
，则无法自动将某物居中。^^^^^非常宽泛的语句，而且不是100%正确。text align:centerparent中的内联块元素。我很高兴能帮上忙。请不要忘记在系统允许的情况下尽快接受您自己的答案。
.intouch {
   list-style: none;
   margin: 0 auto;
   padding: 0;
  width: 110px;
}