CSS3旋转父div但保持内容水平

Question

我有以下HTML，

<a href="#" class="outer"><span class="inner">Text</span></a>

我正在尝试应用背景色，并使用transform属性将其旋转45度，使其看起来像钻石。 但是我希望文本保持水平，但是我不知道该如何实现。 我努力了：

.outer{
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    transform:  translateX(-50%) translateY(-50%) rotate(-45deg);
    background-color:#fdc300;
    width:70px;
    height:70px;
    position:relative;
    display:inline-block;
}
.inner{
    color:#FFF;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform:  translateX(-50%) translateY(-50%) rotate(45deg);
}

和其他失败的尝试，却一无所获。 任何帮助，将不胜感激

Answer 1

您需要将display: inline-block为span.inner ：

.inner{
    display: inline-block;
}

DEMO

编辑：

要居中文本，您还需要：

.inner{
    position: relative;
    left: 50%;
    top: 50%;
}

DEMO2