使用CSS居中按鈕使用CSS

我想將這些按鈕居中，但大多數在線的東西不起作用。 <center>不起作用，text-align:center不起作用。使用CSS居中按鈕使用CSS

按鈕應以完全相同的方式顯示出來，除了中間居中。如果你嘗試這個，它將不起作用。我想，一定有一個問題。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>website</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
}); 
</script> 
<style type="text/css"> 
.button0 { 
position:fixed; 
left:88px; 
top:58px; 
font-family:MS Shell Dlg 2; 
font-size:8px; 
font-weight:NORMAL; 
} 
.button1 { 
position:fixed; 
left:6px; 
top:191px; 
font-family:MS Shell Dlg 2; 
font-size:8px; 
font-weight:NORMAL; 
text-align: center; 
margin-left:auto; 
margin-right:auto; 
} 
.button2 { 
position:fixed; 
left:358px; 
top:216px; 
font-family:MS Shell Dlg 2; 
font-size:8px; 
font-weight:NORMAL; 
} 
</style> 
<body> 
<center> 
<div class="button0"><input type="button" style="width: 268px;height: 145px;" value="Button"/></div> 
<div class="button1"><input type="button" style="width: 40px;height: 88px;" value="Button"/></div> 
<div class="button2"><input type="button" style="width: 76px;height: 73px;" value="Button"/></div> 
</center> 
</body> 
</html>

來源

2012-01-31 thelost

我不太明白你想要居中什麼 - 按鈕內的文字？按鈕自己垂直？ – 2012-01-31 17:51:27

按鈕horzintal – thelost 2012-01-31 17:53:51

哇wwhy大拇指朝下 – thelost 2012-01-31 18:02:06

.container { 
text-align: center; 
} 

.center-element { 
width: 100px; 
text-align: left; 
}

或

.container { 
width: 200px; 
} 

.center-element { 
width: 100px; 
margin: 0px auto 0px auto; 
}

或

.container { 
width: 200px; 
} 

.center-element { 
width: 100px; 
position: relative; 
left: 50%; 
margin-left: -50px; 
}

來源

2012-01-31 17:48:00 ggzone

嗯，我不知道爲什麼，但它沒有做任何事情 – thelost 2012-01-31 17:51:17

冷卻它的工作原理。不錯 – thelost 2012-01-31 18:29:08

你想它包裝在一個relative股利。然後您可以將左右邊距設置爲auto。

只要是明確的，這是你在找什麼？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>website</title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
</script> 
<style type="text/css"> 

</style> 
<body> 
    <div style="position:relative; width:500px; height:200px; background:green; text-align:center"> 
     <input type="button" style="width: 268px;height: 145px;" value="Button1"/> 
     <input type="button" style="width: 40px;height: 88px;" value="Button2"/> 
     <input type="button" style="width: 76px;height: 73px;" value="Button3"/> 
    </div> 
</body> 
</html>

來源

2012-01-31 17:48:40 SQLMason

我想我試過，按鈕werent在他們應該在的地方 – thelost 2012-01-31 17:49:41

如果你想讓它們在一起，你可能需要將按鈕換成另一個div。然後按鈕將不需要邊距自動，但包裝div會。 – SQLMason 2012-01-31 18:04:12

您不能分配position:fixed和top & left，並期望爲中心的元素。通常，margin: 0px auto將運行良好。看下面的例子。

.button0 { 
    font-family:MS Shell Dlg 2; 
    font-size:8px; 
    font-weight:NORMAL; 
    margin: 0px auto; 
} 
.button1 { 
    font-family:MS Shell Dlg 2; 
    font-size:8px; 
    font-weight:NORMAL; 
    text-align: center; 
    margin: 0px auto; 
} 
.button2 { 
    font-family:MS Shell Dlg 2; 
    font-size:8px; 
    font-weight:NORMAL; 
    margin: 0px auto; 
}

這裏的a working fiddle to demonstrate。

來源

2012-01-31 17:50:32

酷，它居中它們，但它們的位置不使用給定的那個 – thelost 2012-01-31 17:53:30

所以你想通過FIFO以外的其他方式來居中它們？ – SQLMason 2012-01-31 18:28:14

jsfiddle - 剛打開按鈕塊元素，指定寬度，然後自動邊距左，右。

來源

2012-01-31 17:50:46 Marcus