CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの中央、水平、垂直方向の配置

要素とそのコンテンツを水平、垂直、または中央に配置するためのさまざまなオプションを提供するCSSを使用して、要素またはその中のコンテンツを配置できます。

水平方向の配置

  • インライン要素

    インライン要素またはテキスト、アンカー、スパンなどのインラインブロック要素は、CSStext-alignプロパティを使用して水平方向に整列できます。

  • ブロックレベルの要素

    div、pなどのブロックレベルの要素は、CSSのmarginプロパティを使用して水平方向に配置できますが、要素の幅は、配置が不要になるため、親に対して100％であってはなりません。

  • フロートまたは位置スキームを使用したブロックレベルの要素

    複数の要素を中央ではなく左/右に配置するCSSFloatプロパティを使用するか、CSSポジショニングスキームの絶対メソッドを使用して、要素を水平方向に配置できます。

例

CSSの水平方向の配置の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Alignment</title>
<style>
.screen {
   padding: 10px;
   width: 70%;
   margin: 0 auto;
   background-color: #f06d06;
   text-align: center;
   color: white;
   border-radius: 0 0 50px 50px;
   border: 4px solid #000;
}
.seats span, .backSeats div{
   margin: 10px;
   padding: 10px;
   color: white;
   border: 4px solid #000;
}
.seats span{
   width: 120px;
   display: inline-block;
   background-color: #48C9B0;
}
.left{
   text-align: left;
}
.right{
   text-align: right;
}
.center{
   text-align: center;
}
.seats{
   text-align: center;
}
.backSeats div {
   background-color: #dc3545;
}
.leftFloat{
   float: left;
}
.rightAbsolute{
   position: absolute;
   right: 150px;
}
</style>
</head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="left">Adam</span>
<span class="center">Martha</span>
<span class="right">Samantha</span>
<div class="backSeats">
<div class="leftFloat">Premium 1</div>
<div class="leftFloat">Premium 2</div>
<div class="rightAbsolute">Premium 3</div>
</div>
</div>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSの中央、水平、垂直方向の配置

垂直方向の配置

  • インライン要素

    インライン要素またはテキスト、アンカーなどのインラインブロック要素は、CSSパディング、CSS行の高さ、またはCSS垂直整列プロパティを使用して垂直方向に整列できます。

  • ブロックレベルの要素

    div、pなどのブロックレベルの要素は、CSSのmarginプロパティ、CSSのflexプロパティとCSSのalign-items、またはCSSのtransformプロパティを使用した絶対配置スキームメソッドを使用して垂直方向に配置できます。

例

CSSの垂直方向の配置の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Alignment</title>
<style>
.screen {
   padding: 10px;
   width: 70%;
   margin: 0 auto;
   background-color: #f06d06;
   text-align: center;
   color: white;
   border-radius: 0 0 50px 50px;
   border: 4px solid #000;
}
.seats span:not(.withPadding){
   margin: 10px;
   padding: 10px;
   color: white;
   border: 4px solid #000;
}
.seats span:not(.vertical){
   height: 40px;
   display: inline-block;
   background-color: #48C9B0;
}
.withPadding{
   padding: 20px 20px 0px;
   height: 20px;
   color: white;
   border: 4px solid #000;
}
.vertical{
   display: inline-table;
   background-color: #48C9B0;
   height: 40px;
}
.verticalText {
   display: table-cell;
   vertical-align: middle;
}
.withLineHeight{
   line-height: 40px;
}
.seats{
   text-align: center;
}
.backLeftSeat{
   background-color: #dc3545;
   max-height: 100px;
   height: 70px;
   margin: 20px;
   width: 300px;
   display: inline-block;
   position: relative;
   resize: vertical;
   overflow: auto;
   border: 4px solid #000;
}
.withPosition{
   position: absolute;
   top: 50%;
   left: 2px;
   right: 2px;
   color: white;
   padding: 20px;
   transform: translateY(-50%);
}
.backRightSeats{
   height: 122px;
   width: 800px;
   float: right;
   display: inline-flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}
.withFlex {
   background-color: #dc3545;
   border: 4px solid #000;
   margin-right: 10px;
   color: white;
   padding: 20px;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="withPadding">Adam</span>
<span class="withLineHeight">Martha</span>
<span class="vertical"><p class="verticalText">Samantha</p></span>
<div>
<div class="backLeftSeat">
<div class="withPosition">Premium Readjustable Sofa</div>
</div>
<div class="backRightSeats">
<div class="withFlex">Premium Solo 1</div>
<div class="withFlex">Premium Solo 2</div>
<div class="withFlex">Premium Solo 3</div>
</div>
</div>
</body>
</html>

出力

これにより、次の出力が生成されます-

divが調整されていない場合

CSSの中央、水平、垂直方向の配置

divを調整する場合

CSSの中央、水平、垂直方向の配置

中央調整

上記の水平および垂直方向の配置方法を使用して、要素を中央に配置できます。


  1. CSSの水平文字を含む垂直テキスト

    text-orientation：uprightとwriting-mode：vertical-rlを指定することで、垂直方向のテキストを水平方向のCSSで表示できます。 構文 CSS書き込みモードとテキスト方向プロパティの構文は次のとおりです- Selector {    writing-mode: /*value*/    text-orientation: /*value*/ } 例 次の例は、CSSのoutline-offsetプロパティを示しています。 <!DOCTYPE html> <html>   &nb

  2. Tkinterウィジェットの垂直および水平スクロールバー

    スクロールバーは、アプリケーションで動的な動作を提供するのに役立ちます。 Tkinterアプリケーションでは、垂直スクロールバーと水平スクロールバーを作成できます。スクロールバーは、 Scrollbar（）のオブジェクトを初期化することによって作成されます ウィジェット。 水平スクロールバーを作成するには、方向、つまり「水平」または「垂直」を指定する必要があります。スクロールバーを使用して特定のウィジェットを構成すると、スクロールバーにアクセスできるようになります。 例 #Import the required libraries from tkinter import * #Create