如何集中外部网站的项目

Question

我刚刚完成了我的第一个网站，但是在集中项目方面遇到了一些麻烦。具体来说，来自网站issuu的文件 - 无论是什么进入CSS，我似乎无法集中它。 我已经尝试用显示器创建一个div：block，margin-left：auto;和保证金权利：auto;但似乎没有任何事情发生。我也试过保证金：0自动;出于好奇，这似乎也无济于事。如果有人能够对这个问题有所了解那就太棒了！

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

CSS： - MISC部分中的相关CSS

/* 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 { margin: auto }

Answer 2

您需要在centerscores内设置div上的边距，这一个：

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

例如，

.issuuembed {
    margin: 0 auto;
}