Question

我正在尝试对齐徽标的图片和文字。我不能证明第二行到块的宽度。这是预期的结果：

Logo to the left from two lines reading “Build Home” and “Industrial theme”

我试过了：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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，或者更好地使用div，因为文本只具有表现意义。我将h1替换为div.first，将h2替换为div.second。

图像更好地显示为#logo_text的背景;您只需要在padding-left的{{1}}中为其预留足够的空间。由于#logo_text现在包含图片，因此我会将其重命名为#logo_text。

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

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;
    }

没有CSS3属性，有一个~~讨厌的hack~~ 使用空<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中称为:after）与::after和{ {1}}。它在相应的元素中形成一个新的行，从而避免最初的最后一行被证明是合理的。

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

至少有两种解决方法：

将绝对高度设置为display: inline-block高度：1em`。
设置至少空格大小的负字间距。这里width: 100%。

对于使用.second. Here的诀窍和使用word-spacing: -1em的改进，完全归功于Vjeux：

::after

word-spacing

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

Answer 2

使用此代替对齐

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

从对齐文本到左侧的图像

2 个答案: