css里面怎样让两行文字两端对齐

html-css0108

css里面怎样让两行文字两端对齐,第1张

文字对齐用:text-align,以下是text-align属性的值与描述,希望对你有所帮助;

left:

把文本排列到左边。默认值:由浏览器决定。

right“把文本排列到右边。

center:把文本排列到中间。

justify:实现两端对齐文本效果。

inherit:规定应该从父元素继承 text-align 属性的值。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div{

border: 1px solid blue

width: 300px

text-align: justify

}

div:after {

display: inline-block

width: 100%

content: ''

}

3、浏览器运行index.html页面,此时一行内的文字实现了两端对齐。

方法有很多种,是我就采用以下几种方式之一:

方式一:table布局

这种左右分别对齐的排版,第一反应用table。我知道肯定有人开始鄙视我,说什么年代了还在用table。但是,我想说的是table也是标准标签之一,把标签用在合适的地方,就是对标签最优的利用,不是吗?

*{

    margin: 0

    padding: 0

}

.personName{

    text-transform: uppercase

} <table>

    <tr>

        <td valign="top">

            <span class="personName">Georage:</span>

        </td>

        <td valign="top">

            <p>This is a good day.</p>

            <p>This is a good day.</p>

        </td>

    </tr>

    <tr>

        <td valign="top">

            <span class="personName">Ken:</span>

        </td>

        <td valign="top">

            <p>This is a good day.</p>

            <p>This is a good day.</p>

        </td>

    </tr>

</table>

方式二:利用dl标签

*{

    margin: 0

    padding: 0

}

.personName{

    text-transform: uppercase

    float: left

    width: 80px

    clear: left  /* 清除左浮动 */

}

.words{

    float: left

}

.dailog{

    overflow: hidden /* 可以清除浮动 */

    margin-bottom: 20px

    line-height: 24px

    font-size: 14px

}

<dl class="dailog">

    <dt class="personName">

        Georage:

    </dt>

    <dd class="words">

        <p>This is a good day.</p>

        <p>This is a good day.</p>

    </dd>

    <dt class="personName">

        Ken:

    </dt>

    <dd class="words">

        <p>This is a good day.</p>

        <p>This is a good day.</p>

    </dd>

</dl>

方式三:可以利用 ul 或者 ol 标签,方法类似 方式二。

方式四:可以全用div,具体也类似方式二,这里就不罗列了。

一些详细的样式就不写了,这里只写了主要的样式,仅供参考。