ホームページ > 記事 > ウェブフロントエンド > ボタンを中央に配置する方法
ボタンを中央に配置する方法
- 高洛峰オリジナル
- 2017-03-08 16:03:1024018ブラウズ
今日ページを書いていて、ボタンを中央揃えにする際にcssページにtext-align="center"と書いたのですが、display属性を使っても効果がなかったことに気付きました。何度も試しましたが、ボタンボタンに追加して、pを中央に配置する必要があることがわかりました。説明するために、以下のテストを作成します。
<!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> ページ効果 (p タグは中央に配置されますが、ボタンは中央に配置されません。input タグと button タグを使用してボタンを作成できます):
<!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>ページ効果:
ブログを書くのは初めてで、フロントエンドも初めてなので、不適切な点があれば修正してください、ありがとうございます
更新: の友人のアドバイスのため。以下の最初のコメントでは、要素に text-align: 属性を追加します。この属性は、ライン ボックスの位置を指定することで、ブロック レベル要素内のテキストの水平方向の配置を設定します。 input/button/img などのタグの場合は、display:block 属性を設定して、ブロックレベルに加え、幅、マージンを 0 auto にしてセンタリングを実現することもできます。
以上がボタンを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。