Question

在我的网站完成后，我每天都在尝试修改会使其更具响应性的内容。它是在Muse中制作的，所以不要期待太多的“响应性”。

我有这个类的元素：

#labelstrong
 {
    z-index: 17;
    width: 633px;
    background-color: transparent;
    color: #FFFFFF;
    text-align: justify;
    position: fixed;
    top: 1542px;
    left: 164px;
 }

通常，元素位于屏幕中间。但是当我缩小时，元素保持与屏幕顶部相同的距离（因为当然是顶部属性）。如何定义其位置，即使我放大或缩小它仍然位于屏幕中间。

更新：问题是（我忘了提到）必须修复位置，因为所有元素都有一个水平滚动功能（它们来自屏幕右侧），因此它们必须位于固定位置。

更新2：这是一个实例。想象一下，该课程适用于每个TAG（当然不是菜单）。

http://2323029s8s8s8.businesscatalyst.com/index.html

Answer 1

请参阅此资源，了解使用CSS对元素进行居中的技巧：Centering in CSS: A Complete Guide

如果您创建一个相对定位的父容器元素，则可以轻松地将子元素居中：

.parent {
  position: relative;
}

#labelstrong {
  z-index: 17;
  background-color: transparent;
  color: #FFFFFF;
  text-align: justify;
  position: absolute;

  width: 634px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -317px;
}

请注意，margin偏移量是宽度和高度的一半。

Answer 2

您可以为这些大标签添加以下css：

.fixed-big-tag{
   top: 50%;
   transform: translateY(-50%);
}

另外，作为对策，请确保<body>和<html>具有100％的高度

另一个想法是使用!important的{{1}}规则来覆盖Muse输出的内容。（或任何需要覆盖的规则）

如果有效，你可以在所有需要居中的标签上添加一个新类，并通过css覆盖它

检查出来，让我知道它是怎么回事。

Answer 3

尝试使用百分比而不是像素，例如：

top: 10%;

如果要水平居中，请尝试将边距设置为自动：

margin: 0 auto;

您的代码如下所示：

#labelstrong {
    z-index: 17;
     width: 633px;
     background-color: transparent;
     color: #FFFFFF;
     text-align: justify;
     position: relative;
     top: 10%;
     margin: 0 auto;
}

看一下这个例子：http://jsfiddle.net/5a6fyb21/

Answer 4

jQuery是你最好的选择。

我只是将您的班级设置为固定位置，然后尝试使用以下内容。

$(window).resize(function() {    
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});

使用resize函数，以便在调整窗口大小时它将保持在原位。

Answer 5

以水平可滚动内容为中心的标签：

http://jsfiddle.net/cqztf9kc/

.fixed {
    margin: 50%;
    position: fixed;
    z-index: 1;
}

.content {
    x-overflow: scroll;
    height: 100%;
}

使用CSS在屏幕中间定位元素

5 个答案: