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

您需要将span.inner设置为.inner{ display: inline-block; }：

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

DEMO2

修改

要使文字居中，您还需要：

L

{{3}}

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

1 个答案: