ボタンを中央に配置する方法-htmlチュートリアル-php.cn

ボタンを中央に配置する方法

高洛峰

リリース： 2017-03-08 16:03:10

オリジナル

24055 人が閲覧しました

今日ページを書いていて、ボタンを中央揃えにする際に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 サイトの他の関連記事を参照してください。