Question

我有一个div，我正在使用它作为角落横幅，但是在DIV旋转45度后我无法将文本居中。如何计算顶部和左侧值，以便宽度为300px的DIV位于屏幕左上角的中心？这是我的CSS和HTML的片段：

#cornerBanner {
        color: #F47D31;
        background-color: #333;
        -moz-box-shadow: 2px 2px 20px #888;
        -moz-transform: rotate(-45deg);
        -moz-transform-origin: 50% 50%;
        position: absolute; 
        width: 300px;
        top: 50px;
        left: -100px;
        text-align: center;
      }

<DIV ID="cornerBanner">Beta</DIV>

Answer 1

它居中。你只需稍微调整它的位置：

#cornerBanner {
        color: #F47D31;
        background-color: #333;
        -moz-box-shadow: 2px 2px 20px #888;
        -moz-transform: rotate(-45deg);
        -moz-transform-origin: 50% 50%;
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: 50% 50%;
        position: absolute; 
        width: 300px;
        top: 45px;
        left: -95px;
        text-align: center;
      }

http://jsfiddle.net/AlienWebguy/UxzaL/

如何将旋转的DIV作为角落横幅居中？

1 个答案: