美文网首页
CSS 字体对齐

CSS 字体对齐

作者: 草帽lufei | 来源:发表于2019-01-29 19:16 被阅读0次

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

<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:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

相关文章

  • CSS 字体对齐

    text-align:justify; 两边对齐text-align:left; 左对齐text-align:ri...

  • css 使用字体图标不对齐的时候,错位的情况

    css 使用字体图标不对齐的时候 使用vertical-align: middle; 将字体图标和文字都设置ve...

  • hexo-hiero主题设置文字大小

    字体大小和字体你可以在source/css/_variables.styl文件中60行左右对齐,这里是大部分字体但...

  • 前端Day5

    CSS基础与进阶 1.什么是CSS? CSS是层叠样式表,主要用于设置HTML文本内容(字体,大小,对齐方式等)...

  • Day5

    CSS的定义: css指的是层叠样式表。 用处:用于设置HTML页面中的文本内容。(字体,大小,对齐方式等),图...

  • CSS基础

    CSS(层叠样式表) 简介 CSS是一种标记语言 CSS主要用于设置HTML网页中的文本内容(字体、大小、对齐方式...

  • 认识CSS(1-3天)

    .1 CSS的定义 CSS通常称为CSS样式表或层叠样式表,主要用于设置HTML页面中的文本内容(字体、大小、对齐...

  • Word常用快捷键

    字体放大缩小放大字体:CTRL+]缩小字体:CTRL+[ 对齐文本左对齐:CTRL+L右对齐: CTRL+R居中对...

  • 「CSS」文本

    字体改变字号改变字体加粗字体倾斜字体更改行距font shorthand改变文字颜色 对齐方式文字居中文本垂直对齐...

  • 学习CSS <2>

    1、为文本添加样式 使用CSS可以修改文本的字体、大小、粗细、倾斜、行高、前 和背 颜色、间距和对齐方式,可以决定...

网友评论

      本文标题:CSS 字体对齐

      本文链接:https://www.haomeiwen.com/subject/vuxtjqtx.html