Heim > Artikel > Web-Frontend > So zentrieren Sie die Schaltfläche
So zentrieren Sie die Schaltfläche
- 高洛峰Original
- 2017-03-08 16:03:1024022Durchsuche
Als ich die Seite heute schrieb, stellte ich fest, dass die CSS-Seite text-align="center" schrieb, als ich die Schaltfläche auf zentriert einstellte, aber auch die Verwendung des Anzeigeattributs hatte keine Auswirkung Ich habe es viele Male versucht und festgestellt, dass die Schaltfläche zentriert sein muss. Fügen Sie einfach ein p zur Schaltfläche hinzu und zentrieren Sie dann das p. Schreiben Sie unten einen Test zur Veranschaulichung:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p,input,button{
text-align: center;
}
</style>
</head>
<body>
<p>你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊</p>
<input type="button" value="点我握手哦"/><br/>
<button type="button">点我呀</button>
</body>
</html>Seiteneffekt (das p-Tag ist zentriert, aber die Schaltfläche ist nicht zentriert. Sie können Eingabe- und Schaltflächen-Tags verwenden, um Schaltflächen zu erstellen):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*p,input,button{
text-align: center;
}*/
p{
text-align: center;
}
</style>
</head>
<body>
<p>
<p>你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊</p>
<input type="button" value="点我握手哦"/><br/>
<button type="button">点我呀</button>
</p>
</body>
</html>Seiteneffekt:
Dies ist das erste Mal, dass ich einen Blog schreibe, und das tue ich auch auch ein Neuling im Frontend. Wenn es etwas Unangemessenes gibt, sind Korrekturen willkommen, danke
Update: Aufgrund der Ratschläge aus dem ersten Kommentar unten möchte ich etwas mehr hinzufügen, Text ausrichten : Das Attribut gibt die horizontale Ausrichtung des Texts im Element an. Dieses Attribut gibt den Punkt an, an dem die horizontale Ausrichtung des Texts innerhalb des Elements auf Blockebene festgelegt werden soll Sie können auch das Attribut display: block festlegen, um es zu einem Element auf Blockebene zu machen, plus width, margin: 0 auto, um eine Zentrierung zu erreichen.
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die Schaltfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!