Question

这是我第一次在网页上使用CSS而且我遇到了对齐问题。问题是每当我调整窗口大小时我正在查看我的网页时，页面上的元素会因为它们被设置为固定宽度而失去对齐。我有三个CSS类，如下所示。

.left {
      width: 30%;
      float: left;
      text-align: right;
}
.right {
      width: 65%;
      margin-left: 10px;
      float:left;
}
.center {
    width: 87%;    
    text-align: center; 
}

如何解决这个问题，以便我的标题（使用'center'类保持直接在我的文本框上方对齐（使用'right'类）

Answer 1

您可以使用jquery并在窗口调整大小时计算填充。

以下是一个例子：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#alwaysCentered{
background: #D4D4D4;
width: 175px;
text-align: center;
}
</style>
</head>
<body>
<div id="alwaysCentered">I will always be centered</div>

<script>
alwaysCenteredMarginLeft = ($(window).width() - $('#alwaysCentered').width()) / 2
alwaysCenteredMarginTop = ($(window).height() - $('#alwaysCentered').height()) / 2;
    $('#alwaysCentered').css({
        'margin-left' : alwaysCenteredMarginLeft,
        'margin-top' : alwaysCenteredMarginTop
    });

    window.onresize = function(event) {
    alwaysCenteredMarginLeft = ($(window).width() - $('#alwaysCentered').width()) / 2
alwaysCenteredMarginTop = ($(window).height() - $('#alwaysCentered').height()) / 2;
    $('#alwaysCentered').css({
        'margin-left' : alwaysCenteredMarginLeft,
        'margin-top' : alwaysCenteredMarginTop
    });
}
</script>
</body>
</html>

当窗口大小改变CSS / HTML时如何保持对齐

1 个答案: