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

CSSを使用したテキストの配置の設定

水平方向の配置にはCSStext-alignプロパティを使用し、垂直方向の配置にはCSSのpadding-bottomとCSSのline-heightを使用して、HTMLドキュメントのテキストを配置できます。

構文

上記のCSSプロパティの構文は次のとおりです-

Selector {
   text-align: center | left | right | justify | inherit | initial;
}
Selector {
   padding: /*value*/;
}
Selector {
   line-height: /*value*/;
}

テキストを水平方向に揃える例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<title>CSS Text 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{
   margin: 10px;
   padding: 10px;
   color: white;
   border: 4px solid #000;
   width: 120px;
   display: inline-block;
   background-color: #48C9B0;
}
.left{
   text-align: left;
}
.right{
   text-align: right;
}
.center{
   text-align: center;
}
.seats{
   text-align: center;
}
</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>
</body>
</html>

出力

CSSを使用したテキストの配置の設定

テキストを垂直方向に揃える例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<title>CSS Text 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;
}
</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>
</body>
</html>

出力

CSSを使用したテキストの配置の設定


  1. CSSを使用したクロスブラウザの不透明度の設定

    プロパティの不透明度は最新のソリューションであり、Firefox 0.9以降、Safari 2、Opera 9以降、IE 9以降、およびすべてのバージョンのChromeで機能します。 -moz-opacityプロパティは、0.9より古いFirefoxバージョンの不透明度プロパティです。–khtml-opacityプロパティは、1から始まるサファリバージョン用です。filterプロパティは、不透明度のような効果を与える5〜9のIEブラウザ用です。現代の不透明度のフォールバックとしてこれらすべての値を一緒に使用すると、すべてのブラウザで不透明度を使用できます。 以下は、CSSを使用してクロスブラ

  2. CSSで角度を使用して線形グラデーションの方向を設定する

    グラデーションの方向をより細かく制御するには、次の構文のように角度を定義します- background-image: linear-gradient(angle, color-stop1, color-stop2); 以下は、CSSで角度を使用して線形グラデーションの方向を設定するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans