如何將文字/課程與<style> tag when it won't center in css or style tag?

Question

我將margin-auto 放在我網站上的toggle類中。 它有點在中間，但與按鈕不對齊。 我需要在CSS或JavaScript中做些什么，應該放在那里嗎？

  <style> .toggler { width: 500px; height: 200px; position: relative; margin-top:0; margin-right:auto; margin-bottom:0; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } .ui-effects-transfer { border: 2px dotted gray; } .kiri{text-align:center;} </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script> $( function() { // run the currently selected effect function runEffect() { // get effect type from var selectedEffect = $( "#effectTypes" ).val(); // Most effect types need no options passed by default var options = {}; // some effects have required parameters if ( selectedEffect === "scale" ) { options = { percent: 50 }; } else if ( selectedEffect === "transfer" ) { options = { to: "#button", className: "ui-effects-transfer" }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } // Run the effect $( "#effect" ).effect( selectedEffect, options, 500, callback ); }; // Callback function to bring a hidden box back function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // Set effect from select menu value $( "#button" ).on( "click", function() { runEffect(); return false; }); } ); </script> </head> <body> <nav> <ul> <li><a href="CONTACT.html">Contact</a></li> <li><a href="JSBASICS.html">JQUERY TIPS</a></li> <li><a href="JQUERYBASICS.html">JS TIPS</a></li> <li><a href="INFO.html">Info</a></li> <li><a href="ABOUT.html">About</a></li> <li><a href="home.html">Home</a></li> </ul> </nav> <h2>Jquery Tips</h2> <p id="js">JavaScript/jQuery is a programming language that you can use to add interactivity to your web page.</p> <p id="poo"> if you put your mouse over the sentence above there will be a light blue highlight the lightgray background that was made using the <a href="https://www.sitepoint.com/web-foundations/onmouseover-html-element/"><span class="pink">onmouse event.</span></a> <div class="footer"> <span class="flatorange">@2016-20XX &#8226 Nia Daniels &#8226 FINAL EXAM &#8226 CIST1520 </span><br> <span class="flatblue">Scripting Technologies</span><br> <span class="flatgreen">Mr.Cash</span><br> </div> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">2 Jquery Effects</h3> <p id="hmm">eres una mujer o hombre? soy una mujer. quiero una pizza. queires una pizza o no?</p> </div> </div> <div class="kiri"> <select name="effects" id="effectTypes"> <option value="bounce">Bounce</option> <option value="clip">Clip</option> </select></div> <div class="kiri"> <button id="button" class="ui-state-default ui-corner-all">Run Le Effect</button></div> <script>

Answer 1

增加margin: 0 auto; .toggler和#effect都可以解決問題。 由於您在#effect上設置了寬度， #effect您將需要自動邊距來為您處理居中。

如何將文字/課程與<style> tag when it won't center in css or style tag?

問題描述

1 個解決方案

解決方案1
0 已采納 2016-08-03 23:45:43

如何將文字/課程與<style> tag when it won't center in css or style tag?

問題描述

1 個解決方案

解決方案1 0 已采納 2016-08-03 23:45:43

解決方案1
0 已采納 2016-08-03 23:45:43