Html 如何将具有Z索引的内容放在中心位置_Html_Css

Html 如何将具有Z索引的内容放在中心位置

html css

Html 如何将具有Z索引的内容放在中心位置,html,css,Html,Css,我试图使用div来集中我的所有内容，但每次我使用中心代码时，我的内容都会完全倾斜我试着使用这个代码 position: relative; max-width: 100%; height: auto; top: 50%; left: 50%; 但这会导致我的内容捕捉到最右边。我不确定我做错了什么，但这可能与我的课堂风格有关这是我正在使用的代码的一部分。我正在为我的班级制作一个网站 CSS: .centercontent { position:relative; max-wi

我试图使用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;
}

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

HTML:

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

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

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

我认为使用Z-index会导致代码表现出不稳定的行为，但我必须使用Z-index来对齐整个代码中的所有部分。如果不是Z指数，那么我不知道会出什么问题

我的最终目标是，无论在多大的电脑上观看，内容都要以中心为中心。我希望无论计算机有多大，图像都是相同的比例，如果计算机更小，图像就更小。不管怎样，它都会在屏幕上居中显示

非常感谢您的帮助

您需要为主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>


.centercontent{
文本对齐：居中；
位置：相对位置；
最大宽度：100%；
}
.前线{
z指数：2；
}

您需要为主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>


.centercontent{
文本对齐：居中；
位置：相对位置；
最大宽度：100%；
}
.前线{
z指数：2；
}

要在任何屏幕大小上居中放置容器，可以使用以下代码

.centercontent{
  margin: 0 auto;
  width:50%; // You can put any width to the container.
}

要使容器在任何屏幕大小上居中，可以使用以下代码

.centercontent{
  margin: 0 auto;
  width:50%; // You can put any width to the container.
}

你所做的几乎是正确的。但是，您在尝试水平对齐对象时遇到了麻烦

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

text-align: center;

要垂直对齐：

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

这里有一个工作示例：

您所做的几乎是正确的。但是，您在尝试水平对齐对象时遇到了麻烦

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

text-align: center;

要垂直对齐：

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

下面是一个工作示例：

希望这是你需要的

希望这就是你所需要的

在css中有很多方法可以把事情放在中心位置。您可以在此处看到一些提示和说明： z-索引不导致对齐错误：）

例如，只需在容器中添加一个transform:translate（-50%，-50%）

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

.centercontent{
位置：绝对位置；
最大宽度：100%；
高度：自动；
最高：50%；
左：50%；
边框：2个实心番茄；
转换：翻译（-50%，-50%）；
}

在css中，有很多方法可以使内容居中。您可以在此处看到一些提示和说明： z-索引不导致对齐错误：）

例如，只需在容器中添加一个transform:translate（-50%，-50%）

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

.centercontent{
位置：绝对位置；
最大宽度：100%；
高度：自动；
最高：50%；
左：50%；
边框：2个实心番茄；
转换：翻译（-50%，-50%）；
}

在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;
  }

在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;
  }