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

这应该是这样的，就像有人在Adobe 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

合理的问题是最后一行通常没有理由，因为字母间距太长。

如果你可以使用CSS3，那么有新属性可以实现： http://www.css3.com/css-text-justify/

如果标题始终保持不变，您还可以调整字体大小和字母间距属性，直到它适合。

Answer 2

一个重要的事情是，虽然最初在adobe photo shop或illustrator等中创建图形是不同的，但是当我们在实际网页中实现时，输出在某些情况下可能会有所不同。所以我们必须写这样的css，这样我们才能完成所需的设计。感谢。

查看代码和演示的小提琴

小提琴：http://jsfiddle.net/ybf25/3/

演示：http://jsfiddle.net/ybf25/3/embedded/result/

注意：因为我没有玫瑰图像所以我无法将Demo创建为您所讨论的图像。

请参阅屏幕截图输出：请在新窗口中打开屏幕截图以查看清晰图像。