0

我正在尝试使用 div 将所有内容居中，但每次使用中心代码时，我的内容都会完全歪斜。

我尝试使用此代码

position: relative;
max-width: 100%;
height: auto;
top: 50%;
left: 50%;

但这会导致我的内容向最右边靠拢。我不确定我做错了什么，但这可能与我的课堂风格有关。

这是我正在使用的代码的一部分。我正在为我的班级制作一个网站！

CSS：

.centercontent {
    position:relative;
    max-width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
}

.front {
    position:absolute;
    top: 50px;
    left:800px;
    z-index: 2;
}

HTML：

<div class="centercontent">
  <img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" />
</div>

我认为使用 Z-index 会导致代码出现问题，但我必须使用 Z-Index 来对齐总代码中的所有部分。如果不是 Z-Index，那么我不知道可能出了什么问题。

我的最终目标是无论在什么尺寸的计算机上查看内容，都可以使内容居中。无论计算机有多大，我都希望图像具有相同的比例，如果计算机较小，则图像要小一些。无论如何，它都会保持在屏幕中央。

任何帮助是极大的赞赏！

4

6 回答 6

2

有很多方法可以在 CSS 中居中。您可以在这里看到一些提示和说明：居中 z-index 的提示不会导致对齐错误 :)

例如，只需在容器中添加一个 transform: translate(-50%, -50%) 即可。

您可以在下面看到修改后的代码

    .centercontent{
        position:absolute;
        max-width: 100%;
        height: auto;
        top: 50%;
        left: 50%;
        border:2px solid tomato;
        transform: translate(-50%, -50%);
    }
<!Doctype html>
<html>
<head>
</head>

<body>
<div class="centercontent">

<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" >

</div>

</body>
</html>

于 2019-04-29T13:50:18.387 回答
0

要将容器置于任何屏幕尺寸的中心，您可以使用以下代码。

.centercontent{
  margin: 0 auto;
  width:50%; // You can put any width to the container.
}
于 2019-04-29T13:44:58.623 回答
0

你所做的几乎是正确的。但是您对水平对齐对象的尝试感到困惑。

在块级元素上水平对齐的最简单方法：

text-align: center;

要垂直对齐：

position: relative;
top: 50%;
transform: translateY(-50%);

这是一个工作示例：https ://jsfiddle.net/yorjk2h7/

于 2019-04-29T13:45:45.527 回答
0 
.centercontent{
    position:relative;
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
}
.front {
max-width: 100%;
z-index:2
}

希望这是你需要的

于 2019-04-29T13:46:15.090 回答
0

您需要为主 div 赋予样式，即“centercontent”，并从图像中删除额外的样式。因此，您的整个代码将如下所示。

<!Doctype html>
<html>
<head>

<style>
    .centercontent {
    text-align: center;
    position: relative;
    max-width: 100%;
    }
    .front {

        z-index: 2;
    }

</style>
</head>

<body>
<div class="centercontent">

<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" >

</div>

</body>
</html>
于 2019-04-29T13:43:06.517 回答
0

在您的 CSS 中尝试此代码

.centercontent {
    max-width: 100%;
    height: auto;
  }

.front {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
  }
于 2019-04-29T13:50:24.627 回答