html&css中的文字对齐问题 - 林七七-HTML Tutorial-php.cn

html&css中的文字对齐问题 - 林七七

WBOY

Release： 2016-05-21 08:35:27

Original

1581 people have browsed it

html&css的使用过程中，我们经常会遇到很多文字对齐问题。下面我要介绍一个有丁点难的文字对齐问题。

实现效果如下图所示。

两行长度不定的文字，要让它们总体水平居中，然后，这两行字要左对齐，如下图所示。

听起来好像挺简单，然而实现起来却。。。。。。

错误做法一：

用一个大块div包住两个div，在大div中设置"text-align:center; "，在小div中设置"text-align:left; "

结果如下图所示。

因为div会占据一整行，而不能随内容大小自动调节宽度，如果要对大div设置width，这也不好控制，因为万一文段长度改变，那么还是无法实现居中。

错误做法二：

于是我把小div改成span，因为span是行内元素，能随span内的文段宽度来调节自身宽度。结果如下图所示。

因为span自动调节自身宽度（即span宽度等于文段长度），所以"text-align:left; "对它不起作用。

正确做法：

既然块级元素和行内元素都无法实现该效果，那能否折中采取介于它们之间的元素。

对，就是设置"display:inline-block;"。

效果图如下：

思路：在一个大div中放置一个小div，小div中包含2个span文段。大div设置"text-align:center; "，让小div居中; 小div设置"display:inline-block;"，这样小div就能有行内元素的特性，会根据内容自动调节自己的宽度，再设置"text-align:left; "，让其中的元素左对齐，这样就搞定了。

Tip：小div中的span元素可替换为div等块级元素，小div可替换为span等行内元素。

html代码如下：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="child-container"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>请尽快付款以保证商家能及时提供服务<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">><span style="color: #800000;">br</span><span style="color: #0000ff;">/></span>
        <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>未支付订单将在半个小时后关闭<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span>

Copy after login

html代码

css代码如下：

<span style="color: #008080;"> 1</span> <span style="color: #800000;">*</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">#container </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> #DBEDFD</span>;<span style="color: #ff0000;">   //这三句只是为了美观，请忽略。。。
</span><span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 40px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 15px 0</span>;
<span style="color: #008080;">10</span> }
<span style="color: #008080;">11</span> <span style="color: #800000;">#child-container </span>{
<span style="color: #008080;">12</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">14</span> }

Copy after login

CSS代码