Question

我创造了一个设计，在中间用斜线垂直分割。它的每一面都有文字，我想垂直和水平居中，无论使用哪个设备进行查看。设计一面是黑色，另一面是白色，因此，文字颜色也需要改变。我无法弄清楚如何调整文本始终垂直居中的不同分辨率和设备。我愿意使用jQuery或将其转换为图像，如果我能弄清楚如何使这项工作。

http://jsfiddle.net/dw4Cj/7/

---------------------- HTML --------------------

<div id="wrapper">
   <div id="right"></div>
    <div class="content" id="left-content">
        <h1> Designer </h1>
    </div>
    <div class="content" id="right-content">         
        <h1> Developer </h1>
    </div>
 </div>

--------------------- CSS -------------------------

#right {
     background: none repeat scroll 0 0 rgba(0,0,0,1);
     height: 10000px;
     left: -851px;
     position: fixed;
     top: -150px;
     transition: all 0.5s ease-in-out 0s;
     transform: rotate(10deg);
     -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
     -o-transform: rotate(10deg);
     -ms-transform: rotate(10deg);
     width: 710px;
}

#right-content {
     position: fixed;
     margin: 0 0 0 703px;
     top: 40px;
}

#left-content {
    color: white;
    position: fixed;
    text-align: right;
    top: 40px;
    width: 574px;
}

.content {
    padding-top: 260px;
}

 #left {
     float: right;
     margin-right: 40px;
 }

Answer 1

您可以使用渐变来创建背景，我在这里为您创建了一个示例：

/* HTML */
<body>
    <p class="center-vertical">Designer <span class="black">Developer</span></p>
</body>


/* CSS */
body, html {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
background-image: -webkit-linear-gradient(-15deg, #000 50%, #fff 50%, #fff 100%);
background-image: -moz-linear-gradient(-15deg, #000 50%, #fff 50%, #fff 100%);
background-image: -linear-gradient(-15deg, #000 50%, #fff 50%, #fff 100%);
}

p {
text-align: center;
font-size: 30px;
color: #fff;
word-spacing: 80px;
}

.black {
color: #000;
}

/* JS */
$(document).ready(function(e) {

var centerVerticaly = function() {
    var marginTop = $('body').height() / 2;

        $('.center-vertical').css({
            marginTop: marginTop
        });
};

    $(window).bind("load resize", function(){
        centerVerticaly();
    });

    centerVerticaly();

});

http://jsfiddle.net/LFGGV/

它缺少您发布的jsfiddle中间的阴影，但您可以通过在渐变中添加更多断点来创建阴影。

我确实选择在jQuery的帮助下将文本居中，可能有更好的方法来做到这一点，但它有效。

使设计移动和不同的分辨率兼容

1 个答案: