TechCodeview

CSS は主に、HTML Web ページに最適なスタイルを提供するために使用されます。 CSS を使用すると、ページ上の要素の配置を指定できます。

ボタンをWebページの中央に配置するには、さまざまな方法があります。ボタンを垂直方向だけでなく水平方向にも配置できます。次のメソッドを使用してボタンを中央に配置できます。

テキスト配置: 中央- 親 div タグの text-align プロパティの値を中央に設定する。マージン: 自動- margin プロパティの値を auto に設定する。ディスプレイ: フレックス- 表示プロパティの値を flex に設定し、 コンテンツの正当化 財産を 中心 。表示: グリッド- 表示プロパティの値をグリッドに設定する。

いくつかの図を使用して、上記の方法を理解しましょう。

例

この例では、 テキスト整列 プロパティを作成し、その値を 中心 。これは、body タグまたは要素の親 div タグに配置できます。

ここでは、 テキスト整列: 中央; button 要素の親 div タグ内。

 Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me 

出力

例

この例では、 表示: グリッド; 財産、そして マージン: 車。 財産。ここでは、 表示: グリッド; button 要素の親 div タグ内。

dbms でのデータベース設計

ボタンは水平位置と垂直位置の中央に配置されます。

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: grid; } button { background-color: lightblue; color: black; font-size: 25px; margin: auto; } p{ font-size: 25px; } Click me <p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p> 

出力

例

ボタンを中央に配置した例です。この例では、 ディスプレイ: フレックス; 財産、 コンテンツの位置揃え: 中央; 財産、そして 整列項目: 中央; 財産。

この例は、ボタンを水平位置と垂直位置の中心に配置するのに役立ちます。

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: flex; justify-content: center; align-items: center; } button { background-color: lightblue; color: black; font-size: 25px; } Click me 

出力