对齐文本左侧的图像答案

【问题标题】：Image to the left from a justified text对齐文本左侧的图像
【发布时间】：2015-03-23 03:23:59
【问题描述】：

我正在尝试对齐徽标的图像和文本。我无法证明第二行与块的宽度一致。这是预期的结果：

我试过了：

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500); 
h1 {
    line-height:30px;
    font-size:30px;
    background:#eee;
    color: #333333;
    }

h2 {
    line-height:10px;
    font-size:12px;
    background:#eee;
    text-transform: uppercase;
    color:  #434343;
    }

img#logo {
    margin-right:10px;
    margin-top: 0px;
    float:left;
    }
#logo_text{
    font-family: 'Ubuntu', sans-serif;
    width: 230px; 
    }
#logo_text h2{
    text-align: justify;
    }

<img id="logo" src="http://placehold.it/52x36">
<div id="logo_text">
    <h1>Build Home</h1>
    <h2>Industrial theme</h2>
</div>

【问题讨论】：

标签： html css justify

【解决方案1】：

CSS3 中有text-align-last 属性，即has not gained wide adoption in the browsers yet。因此，您也需要设置属性的prefixed versions，并祈祷一切正常。

此外，您的图像不仅最后一行强制对齐，而且还更改了字距。 CSS3 有text-justify: distribute 以在单词间和字母间空间之间平均分配从行尾开始的空间。遗憾的是，截至今天（2015 年 3 月），它是 almost unimplemented¹。只有MSIE implements it。目前，您需要使用影响字距调整的常用方法：letter-spacing 属性。设置letter-spacing: 0.5ex 应该可以完成这项工作。

^{¹ 我找不到更好的来源，很抱歉 W3Schools 链接。 QuirksMode has only a test.}

打破你的例子的另一件事是h1 和h2 有边距。您可以设置margin: 0，或者更好地使用divs，因为文本只是具有表示意义。我会将h1 替换为div.first，将h2 替换为div.second。

图片最好显示为#logo_text的背景；你只需要在#logo_text 的padding-left 中为它预留足够的空间。由于#logo_text 现在包含图像，我将其重命名为#logo。

最后，为了摆脱脆弱的固定宽度设置，#logo 和.first 都应该有display: inline-block。如果您不喜欢内联块与外部元素的交互方式，您可以随时将其包装在另一个 div 中。

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500); 
#logo {
    font-family: 'Ubuntu', sans-serif;
    padding-left: 62px;
    background: url(http://placehold.it/52x36) 0 50% no-repeat;
    }
#logo, #logo .first {
    display: inline-block;
    }
#logo .first {
    line-height: 30px;
    font-size: 30px;
    background: #eee;
    color: #333333;
    }
#logo .second {
    margin: 0;
    line-height: 10px;
    font-size: 12px;
    background: #eee;
    text-transform: uppercase;
    color: #434343;
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    -ms-text-align-last: justify;
    -o-text-align-last: justify;
    text-align-last: justify;
    -moz-text-justify: distribute;
    -webkit-text-justify: distribute;
    -ms-text-justify: distribute;
    -o-text-justify: distribute;
    text-justify: distribute;
    letter-spacing: 0.5ex; /* HACK: Remove once text-justify is supported. */
    }
.outline {
    margin-top: 1em;
    }
.outline * {
    outline: 1px dotted;
    }
.outline #logo .first {
    outline-color: red;
    }
.outline #logo .second {
    outline-color: green;
    }
.outline #logo {
    outline-color: blue;
    }
.outline #logo .first::after, .outline #logo .second::after {
    outline: 1px dotted #cad;
    }

<div id="logo">
    <div class="first">Build Home</div>
    <div class="second">Industrial theme</div>
</div>

<div class="outline">
<div id="logo">
    <div class="first">Build Home</div>
    <div class="second">Industrial theme</div>
</div>
</div>

没有 CSS3 属性，有一个 ~~讨厌的 hack~~ 解决方法，使用空的 :after 伪元素（在 CSS3 中称为 ::after）与 display: inline-block 和 width: 100%。它在相应的元素中形成一个新行，从而避免原来的最后一行被证明是对的。

问题是您在相应元素的末尾得到一个空行。当将此技巧应用于真实文本段落时，这并不重要，因为无论如何您通常都会使用边距来创建空间。在这里，它是一个交易破坏者。

至少有两种解决方法：

将绝对高度设置为.second. Hereheight: 1em`。
至少设置一个空格大小的负字间距。这里word-spacing: -1em。

对于 ::after 的技巧和使用 word-spacing 的改进，完全归功于 Vjeux：

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,500); 
#logo {
    font-family: 'Ubuntu', sans-serif;
    padding-left: 62px;
    background: url(http://placehold.it/52x36) 0 50% no-repeat;
    }
#logo, #logo .first {
    display: inline-block;
    }
#logo .first {
    line-height: 30px;
    font-size: 30px;
    background: #eee;
    color: #333333;
    }
#logo .second {
    text-align: justify;
    line-height: 10px;
    font-size: 12px;
    background: #eee;
    text-transform: uppercase;
    color: #434343;
    letter-spacing: 0.5ex; /* HACK: Remove once text-justify is supported. */
    }
#logo .second::after {
    content: "";
    display: inline-block;
    width: 100%;
    }
.with_height #logo .second {
    height: 1em;
    }
.with_word_spacing #logo .second {
    word-spacing: -1em;
    }
.outline {
    margin-top: 1em;
    }
.outline * {
    outline: 1px dotted;
    }
.outline #logo .first {
    outline-color: red;
    }
.outline #logo .second {
    outline-color: green;
    }
.outline #logo {
    outline-color: blue;
    }
.outline #logo .first::after, .outline #logo .second::after {
    outline: 1px dotted #cad;
    }

<div id="logo">
    <div class="first">Build Home</div>
    <div class="second">Industrial theme</div>
</div>
<div id="logo" class="with_height">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
<div id="logo" class="with_word_spacing">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>

<div class="outline">
<div id="logo" class="with_height">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
<div id="logo" class="with_height">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
<div id="logo" class="with_word_spacing">
    <div class="first">Build Home</div>
    <div class="second" style="height:1em">Industrial theme</div>
</div>
</div>

后来我发现了这个相关的问题：Justify the last line of a div?

【讨论】：

【解决方案2】：

用这个代替证明

#logo_text h2{
  text-align: center;
 }
 #logo_text h1{
  padding: 3px 0px;
 }

【讨论】：