html - 在 html/css 中对齐单个单词

Question

我有一个标题，我是这样构造的:

<header class="top">
  <a href="">
    <span class="right">Stichting Delftsche Opera Compagnie presenteert</span>
    <h1 class="right">Carmen</h1>
    <h2 class="right">Een opera door Krashna Musika en de TU Delft</h2>
  </a>
</header>

这应该是这样的，因为有人用 Adob​​e Illustrator 做了这个

然后我应用了一些 css 并得到了这个(原来有一个荷兰语拼写错误，这个被更正了，比例也不完全相等):

规则:

.top {
    display: block;
    width: 800px;
    float: right;
}

.top a {
    background-image: url('../img/logo.jpg');
    background-size: 150px 150px;
    background-repeat: no-repeat;

    padding-left: 150px;
    height: 175px;

    display: block;
    overflow: hidden;
}

.top .right {
    text-align: justify;
    width: 650px;
}

.top span, .top h2 {
    color: #E02C33;
    font-size: 1.8em;
}
.top h1 {
    color: #B02025;
    font-size: 4.7em;
    text-transform: uppercase;
}

我这里有两个问题:

1. 我怎样才能证明<span>和 <h2>等长(我的证明没有按预期工作)
2. 如何约束“CARMEN”这样的宽度和高度是预定义的，字符之间的间距由浏览器呈现

Answer 1

justify 的问题是最后一行通常没有对齐，因为字母间距会太长。

如果您可以使用 CSS3，则有新的属性可以实现: http://www.css3.com/css-text-justify/

如果标题始终保持不变，您还可以调整 font-size 和 letter-spacing 属性，直到适合为止。