centering | 易学教程

Centering my navigation menu links

阅读更多关于 Centering my navigation menu links

I just can't seem to figure this out. I've tried text-align: center; , display: inline-block and more but I just cant figure out how to center my navigation within the #menu-bottom-nav. CSS #menu-bottom-nav { width: 600px; height: 70px; margin: 0px auto;} #menu-bottom-nav li { list-style-type: none; float: left; margin-right: 20px;} Any help is appreciated. Try this out: <!DOCTYPE> <html> <head> <title>Test</title> <style type="text/css"> #menu-bottom-nav { margin: 0; padding: 0; width: 600px; text-align: center; border: 1px solid #000; } #menu-bottom-nav li { list-style-type: none; margin

CSS: How can I center a horizontal list? Display:Inline not working

阅读更多关于 CSS: How can I center a horizontal list? Display:Inline not working

问题 I am having major trouble getting the simplest of codes to work. I want my css horizontal list to be centered, that's all. Link here: http://bit.ly/LtIBai I have this code: #megaMenu.megaMenuHorizontal ul.megaMenu { text-align: center; } #megaMenu.megaMenuHorizontal ul.megaMenu > li { display: inline; } Yet it will not center? NOTE: The window must be at "tablet portrait" size to see the code I'm referring to. Approximately 800px wide, when the logo is centered and the menu falls to the next

How to position child div to the center of every parents div using position absolute in css [duplicate]

阅读更多关于 How to position child div to the center of every parents div using position absolute in css [duplicate]

This question already has an answer here: How to center absolutely positioned element in div? 32 answers I'm having difficulty on positioning child div's on every parents div. Here's the css code: .mainDiv { height:500px; position: relative; } .mainDiv .parent1 { height: 250px; background-color: blue; top: 50px; position: relative; } .mainDiv .parent2 { height: 250px; background-color: yellow; position: relative; } .mainDiv .parent1 .sub1 { width: 100px; height: 100px; background-color: green; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 50%; } .mainDiv

FormStartPosition.CenterParent does not work

阅读更多关于 FormStartPosition.CenterParent does not work

问题 In the following code, only the second method works for me (.NET 4.0). FormStartPosition.CenterParent does not center the child form over its parent. Why? Source: this SO question using System; using System.Drawing; using System.Windows.Forms; class Program { private static Form f1; public static void Main() { f1 = new Form() { Width = 640, Height = 480 }; f1.MouseClick += f1_MouseClick; Application.Run(f1); } static void f1_MouseClick(object sender, MouseEventArgs e) { Form f2 = new Form() {

How to center the center circle?

阅读更多关于 How to center the center circle?

问题 How to center the center circle (CSS only)? [Assume latest CSS3 browser support.] Must maintain v/h centering when parent w/h changes dynamically. Would the experimental CSS Box Model spec help here? Thanks. http://jsfiddle.net/dragontheory/VdJFa/5/ <div class="parent"> <div class="middle"> <div class="circle"> <div class="circle"></div> </div> </div> </div> .parent {display: table; margin: 50px auto; background: lightgray; height: 100px; width: 100px;} .middle {display: table-cell; vertical

How to center body on a page?

阅读更多关于 How to center body on a page?

问题 I'm trying to center the body element on my HTML page. Basically, in the CSS I set the body element to be display: inline-block; so that it is only as wide as its contents. That works fine. However, margin: 0px auto; doesn't center it on the page. Does anyone know how to fix this? I want the big blue square to be centered on the page, not floating to the left like it is now. Here's my CSS: body { display: inline-block; margin: 0px auto; text-align: center; } 回答1: Also apply text-align: center

CSS Centering with Transform

阅读更多关于 CSS Centering with Transform

why does centering with transform translate and left 50% center perfectly (with position relative parent) but not right 50%? Working example: span[class^="icon"] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Example that doesn't center: span[class^="icon"] { position: absolute; top: 50%; right: 50%; transform: translate(-50%, -50%); } Because translateX(-50%) moves something back to the left 50% (because of the - negative value), which means it pairs with left: 50%; to center something. If you want to use right: 50%; then use that with translateX(50%) to center

Vertically centering a div in body?

阅读更多关于 Vertically centering a div in body?

I have tried to center this vertically in body (not horizontally). Also, I do not want to specify heights or anything like that. I tried adding a wrapper with a 100% height and other things, but got nowhere. Can you please help me fix this? jsFiddle Here <form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; "> <input type="text" placeholder="Email"/><br> <input type="text" placeholder="Username"/><br> <input type="password" placeholder="Password"/><br> <button type="submit">Next</button> </form> See this edited version of your jsFiddle . Basically, just wrap

Center a 'div' in the middle of the screen, even when the page is scrolled up or down?

阅读更多关于 Center a 'div' in the middle of the screen, even when the page is scrolled up or down?

I have in my page a button which when clicked displays a div (popup style) in the middle of my screen. I am using the following CSS to center the div in the middle of the screen: .PopupPanel { border: solid 1px black; position: absolute; left: 50%; top: 50%; background-color: white; z-index: 100; height: 400px; margin-top: -200px; width: 600px; margin-left: -300px; } This CSS works fine as long as the page is not scrolled down. But, if I place the button at the bottom of my page, when it is clicked, the div is displayed at the top, and the user has to scroll up to view the contents of the div

Auto margins don't center image in page

阅读更多关于 Auto margins don't center image in page

问题 In this example the image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE. <img src="/img/logo.png" style="margin:0px auto;"/> 回答1: add display:block; and it'll work. Images are inline by default To clarify, the default width for a block element is auto , which of course fills the entire available width of the containing element. By setting the margin to auto , the browser assigns half the remaining space to margin-left and the other half to margin-right . 回答2: