如何从外部网站集中项目

Question

我刚刚完成了我的第一个网站，但我有一些问题中心的项目。具体来说，一个来自网站的文档——我似乎无法将其居中，无论css中有什么。我已经试过用display: block, margin-left: auto;和margin-right: auto;但似乎什么也没发生。我也试过margin: 0 auto;出于好奇，这似乎也不起作用。如果有人能在这个问题上给出一些启示，那就太好了!

网站:http://cristinalord.com/aloneinspace.html

CSS: -相关的CSS在MISC节

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*CUSTOM FONTS*/
@font-face{
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: bolder;
}
@font-face{
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Light.ttf') format('truetype');
}

@font-face{
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: bold;
}

/* main font style, background color, and body margins */

body{
    background-color: rgb(255,255,240);
    color:black;
    font-family: 'OpenSans';
    padding: 45px 100px 0px 100px;
    text-align: left;
    line-height: 20px;
}
/* main header style */
div#site_title1 
{
    color:rgb(188,143,143);
    font-size: 28px;
    padding-bottom: 10px;
    font-family: 'OpenSans';
    font-weight: bolder;
    letter-spacing: 2px;
}
div#site_title2
{
    color:rgb(188,143,143);
    font-size: 20px;
    padding-bottom: 5px;
    font-family: 'OpenSans';
    font-weight: bold;
    letter-spacing: 2px;
}
/*menu style*/
div#menu ul a
{
    color:black;
    font-size: 18px;
    padding-bottom: 10px;
    text-decoration: none;
    transition: color 0.5s ease;
    border-color: rgb(255,255,240);
}
div#menu li
{   display: inline;}
div#menu ul a:hover
{
    color:rgb(188,143,143);
    border-bottom: 2px solid #BC8F8F;
    transition: border-color 0.5s ease;
}
div#menu
{word-spacing:5px;
text-align: center;}
#menu, #menu a {
    padding:10px 10px 20px 10px;
    margin-bottom: 10px;
}
div#menu li.selected a { color:rgb(188,143,143);border-bottom: 2px solid #BC8F8F;} 

/* about and image positioning */
div#about
{
    max-width:620px;
    font-size: 16px;
      -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -moz-animation: fadein 0.5s; /* Firefox */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera */
            animation: fadein 0.5s;
    line-height: 140%;
    }
div#images
{
    float:right;
    padding-right: 7.8125%;
    padding-left: 15px;
    padding-bottom: 15px;
      -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -moz-animation: fadein 0.5s; /* Firefox */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera */
            animation: fadein 0.5s;
    max-width: 100%;
}
/* event headers and text */
div#header{
    text-align: center;
}
.eventheader
{
    color:rgb(188,143,143);
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
.eventsubheader
{
    color:#000;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.eventtext
{
    color:black;
    font-size: 16px;
    max-width:400px;
    margin-right: auto;
    margin-left: auto;
    position: center;
    text-align: center;
}
/* table positioning/style */
th{
    padding-bottom: 1%;
    padding-top: 2%;
    width:250px;
}
td{
    padding:1%;
    width:250px;
}
div#tablelist{
    color:#000;
    font-size: 14px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#tablelist, #tablelist a {
padding-left:20px;
padding-right: 20px;
padding-bottom: 20px;
}
table {
    padding-left: 25px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
/* footer style */

html,
body {
    height:100%;
    margin:0;
}
#wrapper {
    min-height:100%;
    position: relative;
    width: 1080px;
    margin: 0 auto;
}
#content {
    padding-bottom:70px;  
    overflow: auto;
}
#footer {
    border-top: 2px solid rgb(188,143,143);
    bottom:0;
    height:70px;
    left:0;
    position:absolute;
    text-align: center;
    width:100%;
    font-size: 12px;
}
body {
          box-sizing: border-box;
     -moz-box-sizing: border-box;
    }

/* MISC. */
a:hover {color:rgb(188,143,143);}

.line{
    width:38%;
    margin-left: auto;
    margin-right: auto;
}

a{text-decoration: none;
    color:#000;
        transition: color 0.5s ease;
    }
div#musicheader
{
    color:rgb(188,143,143);
    font-size: 20px;
    padding-bottom: 5px;
    font-family: 'OpenSans';
    font-weight: bold;
    letter-spacing: 2px;
}
div#centerscores
{
    display:block;
    margin-left: auto;
    margin-right: auto;
}

div#floatleft{
    float:left;
}
.floatleftmulti{
    float:left;
}
div#floatright{
    float: right;
}

/*fadein and center*/
div#contenttext{
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -moz-animation: fadein 0.5s; /* Firefox */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera */
            animation: fadein 0.5s;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
}
div#musiccontent{
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -moz-animation: fadein 0.5s; /* Firefox */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera */
            animation: fadein 0.5s;
            text-align: center;
            margin-right: auto;
            margin-left: auto;
}
.eventcontent{
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -moz-animation: fadein 0.5s; /* Firefox */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera */
            animation: fadein 0.5s;
}
/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​
/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

HTML:

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cristina Lord</title>
    <link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <div id="site_title1">
                Cristina Lord
            </div>
            <div id="site_title2">
                Composer, Pianist
            </div>
        </div>
        <div id="content">
            <div id="menu">
                <ul>
                    <li><a href="about.html">About</a></li>
                    <li><a href="events.html">Events</a></li>
                    <li class="selected"><a href="music.html">Music</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div id="musiccontent">
                <div id="musicheader">
                    Alone, in Space (2013)
                </div>
                <div id='centerscores'>
                    <div data-configid="11690692/7621210" style="width: 525px; height: 340px;" class="issuuembed"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
                </div>
                    <audio controls>
                        <source src="music/Alone in space.mp3" type="audio/mpeg">
                    </audio>
                    <p>By way of dark tone clusters, prolonged pedal technique (creating a blurred, "zero-gravity" effect), and empty spacing on the piano, as well as multiple special techniques on violin (such as microtonal tuning, <em>sul ponticello</em>, and widespread tremolos and glissandos), this piece is meant to evoke the dark, empty, and infinite feeling that is being: alone, in space.</p>
                    <br>
                    <p>This recording features Johann Velasquez, violin, and Cristina Lord, piano.</p>
                    <br>
            </div>
        <div id="footer">
            <footer>
                <p>Copyright Cristina Lord 2014 &copy;</p>
                <a href="http://www.facebook.com/cristina.lord"><img src="images/facebooklogo.png" height="40" width="40" alt="Facebook"></a>
                <a href="http://www.soundcloud.com/cristina_lord"><img src="images/soundcloudlogo.png" height="40" width="76" alt="SoundCloud"></a>
            </footer>
        </div>
    </div>
</body>

</html>

Answer 1

你需要在centerscores中设置div的外边距，这个:

<div data-configid="11690692/7621210" style="width: 525px; height: 340px;" class="issuuembed issuu-isrendered">

例如,

.issuuembed {
    margin: 0 auto;
}

Answer 2

这应该可以修复它:

#centerscores > div { margin: auto }