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

CSSを使用してテキストの配置を設定する

CSSを使用してテキストの配置を設定するには、text-alignプロパティを使用します。可能なプロパティ値は次のとおりです-

text-align: left|right|center|justify|initial|inherit;

例

テキストの配置を設定する例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   -webkit-columns: auto auto; /* Chrome, Safari, Opera */
   -moz-columns: auto auto; /* Firefox */
   columns: auto auto;
   text-align: justify;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>

出力

CSSを使用してテキストの配置を設定する

例

別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet);
}
.demo {
   text-decoration: overline;
   text-decoration-color: yellow;
   font-variant:normal;
   text-align: center;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力

CSSを使用してテキストの配置を設定する


  1. CSSを使用して要素のテキストの色を設定する

    CSSのcolorプロパティは、要素のテキストの色を変更するために使用されます。値は、標準の色名、rgb（）、rgba（）、hsl（）、hsla（）、および16進値として指定できます。 構文 CSScolorプロパティの構文は次のとおりです- Selector {    color: /*value*/ } 次の例は、CSSカラープロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> div {    height: 50px;   &nb

  2. text-align＆text-justify CSSプロパティを使用してテキストを揃える方法は？

    CSS text-justify プロパティは、要素の位置合わせタイプを指定するのに役立ちます。 text-alignプロパティは、要素内のテキストの水平方向の配置を設定します。 例 次の例は、CSSのtext-justifyプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> article {    margin: 3%;    background-color: peachpuff;    text-align: justif