CSS 字体对齐

简介: CSS 字体对齐

text-align:justify; 两边对齐 text-align:left; 左对齐 text-align:right; 右对齐 text-align:center; 中间对齐

image.png

<html>
<head>
    <title>CSS 对齐</title>
</head>
<body>
    <div style="width: 300px;float:left;margin:20px;">
        <h3 style="text-align:justify;">text-align:justify 两边对齐 </h3>
        <p style="text-align:justify;">
            Melbourne, Australia (CNN)Stefanos Tsitsipas confirmed his status as one of the brightest hopes in tennis
            two days ago,
            upsetting Roger Federer, before becoming the youngest man to reach the Australian Open semifinals in 16
            years with a
            bruising, three-hour quarterfinal win Tuesday.
            He is not a bad salesman, either.
            After defeating a brave Roberto Bautista Agut 7-5 4-6 6-4 7-6 (7-2) in a battle of maiden grand slam
            quarterfinalists,
            the Greek phenom urged a captive Rod Laver Arena to give his YouTube channel some love.
            "If you haven't subscribed, please subscribe," Tsitsipas, who chronicles his travels around the world on
            the channel,
            told spectators Tuesday.
            READ: Tsitsipas ousts Federer
            They will probably do anything he wants, such is the charisma of the 6-foot-4 Greek and their affection in
            turn for the
            fast-rising 20-year-old, currently ranked No. 15 in the world.
        </p>
        <p style="text-align:justify;width:300px;">
            英国还在为脱离欧盟纠结不已,法国和德国又高调地重温半个多世纪前的睦邻友好、同仇敌忾的誓言,签署了《亚琛条约》,宣告法德友好合作的决心和行动目标。
            时间、地点、事件,无不晕染厚重的历史色彩。
            法国总统马克龙和德国总理默克尔1月22日在德国西部边境城市亚琛签署两国友好合作条约,与1963年1月22日他们各自的前辈在巴黎签署的《爱丽舍宫条约》遥相呼应。
            当年的条约和签约这件事本身,被视为变仇敌为睦邻、化干戈为玉帛、世代友好的历史宣言和象征。
            今天的新版友谊宣言,被观察人士解读为意在重振法德轴心在欧盟内的地位。
            地点选在亚琛, 更加重了历史和象征色彩。历史上亚琛曾被归入法国版图,阿尔萨斯-洛林地区说法语还是德语曾经是爱不爱国的选择,地区的归属在历史课本上占据了相当篇幅。
        </p>
    </div>
    <div style="width: 300px;float:left;margin:20px;">
        <h3 style="text-align:left;">text-align:left 左对齐 </h3>
        <p style="text-align:left;">
            Melbourne, Australia (CNN)Stefanos Tsitsipas confirmed his status as one of the brightest hopes in tennis
            two days ago,
            upsetting Roger Federer, before becoming the youngest man to reach the Australian Open semifinals in 16
            years with a
            bruising, three-hour quarterfinal win Tuesday.
            He is not a bad salesman, either.
            After defeating a brave Roberto Bautista Agut 7-5 4-6 6-4 7-6 (7-2) in a battle of maiden grand slam
            quarterfinalists,
            the Greek phenom urged a captive Rod Laver Arena to give his YouTube channel some love.
            "If you haven't subscribed, please subscribe," Tsitsipas, who chronicles his travels around the world on
            the channel,
            told spectators Tuesday.
            READ: Tsitsipas ousts Federer
            They will probably do anything he wants, such is the charisma of the 6-foot-4 Greek and their affection in
            turn for the
            fast-rising 20-year-old, currently ranked No. 15 in the world.
        </p>
        <p style="text-align:left;width:300px;">
            英国还在为脱离欧盟纠结不已,法国和德国又高调地重温半个多世纪前的睦邻友好、同仇敌忾的誓言,签署了《亚琛条约》,宣告法德友好合作的决心和行动目标。
            时间、地点、事件,无不晕染厚重的历史色彩。
            法国总统马克龙和德国总理默克尔1月22日在德国西部边境城市亚琛签署两国友好合作条约,与1963年1月22日他们各自的前辈在巴黎签署的《爱丽舍宫条约》遥相呼应。
            当年的条约和签约这件事本身,被视为变仇敌为睦邻、化干戈为玉帛、世代友好的历史宣言和象征。
            今天的新版友谊宣言,被观察人士解读为意在重振法德轴心在欧盟内的地位。
            地点选在亚琛, 更加重了历史和象征色彩。历史上亚琛曾被归入法国版图,阿尔萨斯-洛林地区说法语还是德语曾经是爱不爱国的选择,地区的归属在历史课本上占据了相当篇幅。
        </p>
    </div>
    <div style="width: 300px;float:left;margin:20px;">
        <h3 style="text-align:right;">text-align:right 右对齐 </h3>
        <p style="text-align:right;">
            Melbourne, Australia (CNN)Stefanos Tsitsipas confirmed his status as one of the brightest hopes in tennis
            two days ago,
            upsetting Roger Federer, before becoming the youngest man to reach the Australian Open semifinals in 16
            years with a
            bruising, three-hour quarterfinal win Tuesday.
            He is not a bad salesman, either.
            After defeating a brave Roberto Bautista Agut 7-5 4-6 6-4 7-6 (7-2) in a battle of maiden grand slam
            quarterfinalists,
            the Greek phenom urged a captive Rod Laver Arena to give his YouTube channel some love.
            "If you haven't subscribed, please subscribe," Tsitsipas, who chronicles his travels around the world on
            the channel,
            told spectators Tuesday.
            READ: Tsitsipas ousts Federer
            They will probably do anything he wants, such is the charisma of the 6-foot-4 Greek and their affection in
            turn for the
            fast-rising 20-year-old, currently ranked No. 15 in the world.
        </p>
        <p style="text-align:right;width:300px;">
            英国还在为脱离欧盟纠结不已,法国和德国又高调地重温半个多世纪前的睦邻友好、同仇敌忾的誓言,签署了《亚琛条约》,宣告法德友好合作的决心和行动目标。
            时间、地点、事件,无不晕染厚重的历史色彩。
            法国总统马克龙和德国总理默克尔1月22日在德国西部边境城市亚琛签署两国友好合作条约,与1963年1月22日他们各自的前辈在巴黎签署的《爱丽舍宫条约》遥相呼应。
            当年的条约和签约这件事本身,被视为变仇敌为睦邻、化干戈为玉帛、世代友好的历史宣言和象征。
            今天的新版友谊宣言,被观察人士解读为意在重振法德轴心在欧盟内的地位。
            地点选在亚琛, 更加重了历史和象征色彩。历史上亚琛曾被归入法国版图,阿尔萨斯-洛林地区说法语还是德语曾经是爱不爱国的选择,地区的归属在历史课本上占据了相当篇幅。
        </p>
    </div>
    <div style="width: 300px;float:left;margin:20px;">
        <h3  style="text-align:center;">text-align:center 中间对齐 </h3>
        <p style="text-align:center;">
            Melbourne, Australia (CNN)Stefanos Tsitsipas confirmed his status as one of the brightest hopes in tennis
            two days ago,
            upsetting Roger Federer, before becoming the youngest man to reach the Australian Open semifinals in 16
            years with a
            bruising, three-hour quarterfinal win Tuesday.
            He is not a bad salesman, either.
            After defeating a brave Roberto Bautista Agut 7-5 4-6 6-4 7-6 (7-2) in a battle of maiden grand slam
            quarterfinalists,
            the Greek phenom urged a captive Rod Laver Arena to give his YouTube channel some love.
            "If you haven't subscribed, please subscribe," Tsitsipas, who chronicles his travels around the world on
            the channel,
            told spectators Tuesday.
            READ: Tsitsipas ousts Federer
            They will probably do anything he wants, such is the charisma of the 6-foot-4 Greek and their affection in
            turn for the
            fast-rising 20-year-old, currently ranked No. 15 in the world.
        </p>
        <p style="text-align:center;width:300px;">
            英国还在为脱离欧盟纠结不已,法国和德国又高调地重温半个多世纪前的睦邻友好、同仇敌忾的誓言,签署了《亚琛条约》,宣告法德友好合作的决心和行动目标。
            时间、地点、事件,无不晕染厚重的历史色彩。
            法国总统马克龙和德国总理默克尔1月22日在德国西部边境城市亚琛签署两国友好合作条约,与1963年1月22日他们各自的前辈在巴黎签署的《爱丽舍宫条约》遥相呼应。
            当年的条约和签约这件事本身,被视为变仇敌为睦邻、化干戈为玉帛、世代友好的历史宣言和象征。
            今天的新版友谊宣言,被观察人士解读为意在重振法德轴心在欧盟内的地位。
            地点选在亚琛, 更加重了历史和象征色彩。历史上亚琛曾被归入法国版图,阿尔萨斯-洛林地区说法语还是德语曾经是爱不爱国的选择,地区的归属在历史课本上占据了相当篇幅。
        </p>
    </div>
</body>
</html>

MDN: developer.mozilla.org/en-US/docs/… developer.mozilla.org/en-US/docs/…

目录
相关文章
|
4月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
3月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
80 4
|
4月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
57 4
|
5月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
98 28
|
6月前
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
60 0
|
6月前
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
176 0
|
8月前
|
Web App开发 前端开发 Windows
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
|
8月前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
157 6
|
8月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
74 1
|
8月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
113 1

热门文章

最新文章