左对齐文本的图像

Question

我正在尝试对齐徽标的图像和文本。我无法将第二行调整为块的宽度。这是预期的结果：

我试过这个：

@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>

Answer 1

用这个代替 justify

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

Answer 2

还有属性的text-align-last property in CSS3 that has not gained wide adoption in the browsers yet. Therefore you need to set prefixed versions，祈祷一切顺利。

此外，您的图像不仅对最后一行进行了强制对齐，而且还改变了字距。 CSS3 有 text-justify: distribute to evenly distribute the space from the end of the line among both the inter-word and inter-letter space. Sadly, it’s almost unimplemented¹ as of today (March 2015). Only MSIE implements it。目前，您需要求助于影响字距调整的常用方法：letter-spacing 属性。设置 letter-spacing: 0.5ex 应该可以完成工作。

^{¹ 我找不到更好的来源，对不起 W3Schools link。 QuirksMode has only a test.}

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

图像更好地显示为 #logo_text 的背景；你只需要在#logo_text的padding-left中为它预留足够的space。由于 #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) 与 display: inline-block 和 width: 100%。它在相应的元素中形成一个新行，从而避免原来的最后一行被对齐。

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

至少有两种解决方法：

将绝对高度设置为 .second. Hereheight: 1em`。
设置至少 space 大小的负字间距。这里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?

左对齐文本的图像

Image to the left from a justified text

html

css

justify