使用邊距對齊HTML元素0自動

我正在嘗試將中間的按鈕稱爲「中心」到頁面的中心。我試圖使用margin 0 auto沒有成功。任何人都知道我在做什麼錯了？使用邊距對齊HTML元素0自動

謝謝。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div id=container> 
    <div id="left"> 
     <input type="button" value="left"> 
    </div> 

    <div id="center"> 
     <input type="button" value="center"> 
    </div> 

    <div id="right"> 
     <input type="button" value="right"> 
    </div> 
    </div> 
</body> 
</html>

，這是CSS

#container { 
    background-color: yellow; 
} 

#left, #center, #right { 
    display: inline-block; 
} 

#center { 
    background-color: red; 
    width: 65px; 
    text-align: center; 
    margin: 0 auto; 
} 

#right { 
    float: right; 
}

來源

2015-01-10 user3355028

要居中，如果沒有父容器，如你所說的意見，給#centerdisplay:block然後margin: 0 auto;將正常工作。

來源

2015-01-10 15:34:59

謝謝，但如果沒有父容器呢？如何使用margin 0 auto將中間按鈕居中放置到中心？ – user3355028

添加text-align:center爲#container
添加display:inline-block到#center，以便它可以與父text-align屬性
居中添加float:left爲left按鈕和float:rightright按鈕

#container { 
 
    background-color: yellow; 
 
    text-align: center; 
 
} 
 
#center { 
 
    display: inline-block; 
 
} 
 
#center { 
 
    background-color: red; 
 
    width: 65px; 
 
} 
 
#right { 
 
    float: right; 
 
} 
 
#left { 
 
    float: left; 
 
}

<div id=container> 
 
    <div id="left"> 
 
    <input type="button" value="left"> 
 
    </div> 
 
    <div id="center"> 
 
    <input type="button" value="center"> 
 
    </div> 
 
    <div id="right"> 
 
    <input type="button" value="right"> 
 
    </div> 
 
</div>

來源

2015-01-10 15:34:22

使用邊距對齊HTML元素0自動

回答

相關問題