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/…

目录
相关文章
|
24天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
53 1
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
12月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
260 4
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
223 28
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
157 4
|
Web App开发 前端开发 Windows
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
199 0
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
530 0
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
341 6
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
164 1

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 5
    React 中如何安装与使用 Tailwind CSS
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 9
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation