Question

我有两个菜单，我希望它们都能居中。 “投资组合”菜单只出现在我的投资组合页面上，所以我希望“菜单栏”菜单位于其下方，但让它们都居中。无论我如何改变边距，“菜单栏”菜单都不会移动。发生了什么事？

我是网页设计的新手，我的教授也是新手，所以我为我的代码的不好而道歉哈哈。此外，如果有一种简单的方法可以使文本的其余部分居中

<html>
<head>
    <title>Connor Lepert: Portfolio</title>
    <link rel="icon" href="logo.png">
    <style>
        @font-face {font-family: Vanadine; src: url(vanadine.ttf);}

        a {color: white; font-family: Vanadine; text-decoration: none;}
            a:hover {color: yellow;}
        p {color: white; font-family: Vanadine;}
        footer {font-family: sans-serif; margin-left: 45%; margin-right:45%;}
        body {color: white; background-color: #ABADB0}

        #siteid
        #menubar {position: absolute; margin-left: 400px; text-align: center; font-family: Vanadine;}
        #mediaicons {margin-left: 44.5%;}
        #portfolio {margin-left: 30%; margin-right: 30%}
        #header
    </style>
</head>

<body>

    <h1>
    <div id="portfolio">
        <a href="portfolio.html">Graphic Design</a>
        <a href="photovideo.html">Photography & Videography</a>
        <a href="music.html">Music</a>
    </div>
    </h1>

    <div id="menubar">
        <a href="index.html">Home</a>
        <a href="aboutme.html">About</a>
        <a href=>Contact</a>
        <a href="resume.html">Resume</a>
        <a href="portfolio.html">Portfolio</a>
        <a href="scrapyard.html">ScrapYard</a>
    </div>

    <div id="mediaicons">
    <a href=""><img src="instagram.png" width="30px"></a>
    <a href=""><img src="tumblr.png" width="30px"></a>
    <a href=""><img src="youtube.png" width="30px"></a>
    <a href=""><img src="soundcloud.png" width="30px"></a>
    </div>

    <object data="infographic.pdf" type="pdf" width="100%" height="1000px">
    <p>
        It appears you do not have a pdf plugin for this browser. Download the pdf <a href="infographic.pdf">here</a>.
    </p>
    </object>

    <object data="pagelayout.pdf" type="pdf" width="100%" height="1000px">
    <p>
        It appears you do not have a pdf plugin for this browser. Download the pdf <a href="pagelayout.pdf">here</a>.
    </p>
    </object>

    <br>

    <footer>©<a href=> 2015 by Connor Lepert </a></footer>
</body>
</html>

Answer 1

将左/右边距设置为自动：

#portfolio { margin: 0 auto; }

Answer 2

您的样式标记中存在错误

<style>
    @font-face {font-family: Vanadine; src: url(vanadine.ttf);}

    a {color: white; font-family: Vanadine; text-decoration: none;}
        a:hover {color: yellow;}
    p {color: white; font-family: Vanadine;}
    footer {font-family: sans-serif; margin-left: 45%; margin-right:45%;}
    body {color: white; background-color: #ABADB0}

    #siteid
    #menubar {position: absolute; margin-left: 400px; text-align: center; font-family: Vanadine;}
    #mediaicons {margin-left: 44.5%;}
    #portfolio {margin-left: 30%; margin-right: 30%}
    #header
</style>

请删除正文规则下的#siteid和投资组合规则下的#header，因为这会导致css错误以及在忽略正文规则后的css规则集

它会成为这个

<style>
    @font-face {font-family: Vanadine; src: url(vanadine.ttf);}

    a {color: white; font-family: Vanadine; text-decoration: none;}
        a:hover {color: yellow;}
    p {color: white; font-family: Vanadine;}
    footer {font-family: sans-serif; margin-left: 45%; margin-right:45%;}
    body {color: white; background-color: #ABADB0}

    /**#siteid removed **/
    #menubar {position: absolute; margin-left: 400px; text-align: center; font-family: Vanadine;}
    #mediaicons {margin-left: 44.5%;}
    #portfolio {margin-left: 30%; margin-right: 30%}
    /**#header removed **/
</style>

之后，您需要更改#menubar和#portfolio

的css规则

用

替换它们

    #menubar {margin-left: auto; margin-right: auto; text-align: center; font-family: Vanadine;}

和

    #portfolio {margin-left: auto; margin-right: auto;}

一切终于成为

<html>
<head>
    <title>Connor Lepert: Portfolio</title>
    <link rel="icon" href="logo.png">
    <style>
        @font-face {font-family: Vanadine; src: url(vanadine.ttf);}

        a {color: white; font-family: Vanadine; text-decoration: none;}
            a:hover {color: yellow;}
        p {color: white; font-family: Vanadine;}
        footer {font-family: sans-serif; margin-left: 45%; margin-right:45%;}
        body {color: white; background-color: #ABADB0}

        /**#siteid removed **/
        #menubar {margin-left: auto; margin-right: auto; text-align: center; font-family: Vanadine;}
        #mediaicons {margin-left: 44.5%;}
        #portfolio {margin-left: auto; margin-right: auto;}
        /**#header removed **/
    </style>
</head>

<body>

    <h1>
    <div id="portfolio">
        <a href="portfolio.html">Graphic Design</a>
        <a href="photovideo.html">Photography & Videography</a>
        <a href="music.html">Music</a>
    </div>
    </h1>

    <div id="menubar">
        <a href="index.html">Home</a>
        <a href="aboutme.html">About</a>
        <a href=>Contact</a>
        <a href="resume.html">Resume</a>
        <a href="portfolio.html">Portfolio</a>
        <a href="scrapyard.html">ScrapYard</a>
    </div>

    <div id="mediaicons">
    <a href=""><img src="instagram.png" width="30px"></a>
    <a href=""><img src="tumblr.png" width="30px"></a>
    <a href=""><img src="youtube.png" width="30px"></a>
    <a href=""><img src="soundcloud.png" width="30px"></a>
    </div>

    <object data="infographic.pdf" type="pdf" width="100%" height="1000px">
    <p>
        It appears you do not have a pdf plugin for this browser. Download the pdf <a href="infographic.pdf">here</a>.
    </p>
    </object>

    <object data="pagelayout.pdf" type="pdf" width="100%" height="1000px">
    <p>
        It appears you do not have a pdf plugin for this browser. Download the pdf <a href="pagelayout.pdf">here</a>.
    </p>
    </object>

    <br>

    <footer>©<a href=> 2015 by Connor Lepert </a></footer>
</body>
</html>

注意：margin-left：与margin-right一起使用时自动：auto集中一个被阻止的内容。另外，请避免使用百分比值。

对象不会移动

2 个答案: