使用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 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; 
}

嗯，我不知道为什么，但它没有做任何事情 – 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>

我想我试过，按钮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。

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

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

答

jsfiddle - 刚打开按钮块元素，指定宽度，然后自动边距左，右。

答

在div中尝试垂直居中的文本。例如，请参阅JSFiddle Demo。

使用CSS居中按钮使用CSS

相关推荐