외부 웹 사이트의 항목을 센터링하는 방법

Question

방금 ​​첫 웹 사이트를 만들었지 만 항목 센터링에 문제가 있습니다. 특히, 웹 사이트의 문서가 발행됩니다. CSS에 무엇이 들어가더라도 센터를 배치 할 수 없습니다. 나는 display : block, margin-left : auto로 div를 만들려고 시도했다. margin-right : 자동; 그러나 아무것도 일어나지 않는 것처럼 보인다. 나는 또한 여백을 시도했다 : 0 자동; 호기심에서 벗어나서도 작동하지 않는 것 같습니다. 누군가가이 문제에 대해 밝힐 수 있다면 좋을 것입니다!

웹 사이트 : http://cristinalord.com/aloneinspace.html는

CSS : - 기타 섹션에서 관련 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

당신은 필요 `; {인라인 블록 디스플레이} 첫 아이 : 나는 가정 예를 들어

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

,

.issuuembed { 
    margin: 0 auto; 
} 

Answer 2

이 그것을 수정해야합니다 :

#centerscores > div { margin: auto }