CSS按鈕不會在我的導航中居中

試圖讓我的按鈕居中在下面的文本上方。我認爲這與我的浮法左派有關，但我相信我仍然需要將它左移，因爲之後的內容也是浮動的。CSS按鈕不會在我的導航中居中

保證金：0自動;沒有工作。

請告知：

.button { 
    background-color: rgb(214,52,49); 
    padding: 4px 24px; 
    border-radius: 40px 40px 40px 40px; 
    color: white; 
    text-decoration: none; 
    vertical-align: middle; 
    text-align: center; 
    font-size: 2rem; 
    display: block; 
    width: 150px; /* 150/980 */ 
} 

nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 1em 0; 
    padding: 0; 
    background-color: green; 
    border-bottom: 1px solid #ccc; 
    text-align: center; 
    vertical-align: text-top; 
} 

nav a.button { 
    float: left; 
    margin: 0 auto; 
} 


nav a.button:not(:first-child) { 
    margin-left: 150px; 
}

http://jsfiddle.net/117sparten/kNZEs/3/

來源

2013-09-21 johnnE

做ü想，在綠色的背景 –

燁你按鍵中心，這就是目標=] – johnnE

Here you go。

<header> 
    <nav> 
     <div class="btngroup"> 
     <a href="#" class="button">contact</a> 
     <a href="#" class="button">blog</a> 
     </div> 
    </nav> 
</header> 

.button { 
    background-color: rgb(214,52,49); 
    padding: 4px 24px; 
    border-radius: 40px 40px 40px 40px; 
    color: white; 
    text-decoration: none; 
    text-align: center; 
    font-size: 2rem; 
    display: inline-block; 
    width: 150px; /* 150/980 */ 
} 

.button:not(:first-of-type) { 
    margin-left: 10px; 
} 

nav { 
    width: 100%; 
    float: left; 
    margin: 0 0 1em 0; 
    padding: 0; 
    background-color: green; 
    border-bottom: 1px solid #ccc; 
    text-align: center; 
    vertical-align: text-top; 
} 

nav div.btngroup { 
    width: 410px; 
    margin: auto; 
    height: 
} 

nav a.button { 
    float: left; 
    margin: 0 auto; 
}

來源

2013-09-21 20:50:52 chopper

的感謝！這幫了我很多:) – johnnE

嘗試改變nav a.button這樣的：

nav a.button { display: inline-block; margin: 0 auto; }

或

nav a.button { display: inline; margin: 0 auto; }

來源

2013-09-21 20:48:27

使用在按鈕類

.button 
{ 
    display:inline-block; 
}

此內聯塊屬性和從NAV除去浮動屬性a.button

來源

2013-09-21 20:48:38

我已刪除不需要的浮動感謝您指出了這一點 – johnnE

CSS按鈕不會在我的導航中居中

回答

相關問題