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

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

CSS text-alignプロパティを使用して、要素のテキストを水平方向に設定できます。左、右、位置揃え、中央に設定できます。

構文

CSStext-alignプロパティの構文は次のとおりです-

Selector {
   text-align: /*value*/
}

例

次の例は、CSSのtext-alignプロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   padding: 8px;
   max-width: 200px;
   border: thin solid;
}
p {
   text-align: right;
}
div:nth-child(3) {
   text-align: center;
}
div:last-child {
   text-align: justify;
}
</style>
</head>
<body>
<h2>Student Examination Details</h2>
<div>
<div>Student John</div>
<div>
Student Tom
<p>Did not appeared for the exams.</p>
</div>
<div>Student Brad</div>
<div>Did not appeared for only the last exam.</div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

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

例

<!DOCTYPE html>
<html>
<head>
<style>
td {
   padding: 10px;
   box-shadow: inset 0 0 21px yellow;
}
td:first-of-type {
   text-align: right;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<table>
<tr>
<td>This is it!</td>
</tr>
<tr>
<td>Well, this is a demo text!</td>
</tr>
</table>
</body>
</html>

出力

これにより、次の出力が得られます-

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


  1. CSSハイフンプロパティを使用してテキストにハイフンを追加する

    CSSのハイフンの使用 プロパティでは、テキストにハイフンを追加する方法を指定できます。 例 次の例は、CSSハイフンプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {    width: 20%;    border: 2px groove lime;    margin: 10px;    padding: 10px;    hyphens: none;    

  2. 純粋なCSSによるスムーズなスクロール

    CSSのscroll-behaviorプロパティを使用すると、スクロールの動作を変更できます。 例 次の例は、CSSのscroll-behaviorプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> html {    line-height: 200px;    margin: 30px;    text-align: center;    vertical-align: middle; } #parent {