0

我创建了一个在中间被对角垂直线分割的设计。它的每一侧都有文本，无论使用哪个设备查看它，我都希望垂直和水平居中。设计一侧为黑色，另一侧为白色，因此文本颜色也需要更改。我无法弄清楚如何使其适应文本始终垂直居中的不同分辨率和设备。如果我能弄清楚如何使它工作，我愿意使用 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;
 }
4

1 回答 1

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 的帮助下将文本居中，可能有更好的方法来做到这一点，但它确实有效。

于 2013-01-16T16:22:30.633 回答