英文:
Element not following CSS grid
问题
以下是翻译好的部分：
我正在使用网格布局，并希望以下内容位于底部和中心，但它们出现在左侧：
.body {
margin: 0;
background-color: rgb(255, 237, 237);
display: grid;
grid-template-rows: 10vh 48vh 21vh 21vh;
grid-template-columns: 98vi;
color: white;
}
#scrolllabel {
color: rgb(19, 1, 1);
grid-row: 3;
grid-column: 1;
z-index: 100;
font-family: Arial;
place-content: center;
place-self: center;
align-self: center;
font-size: 25px;
border-width: 0;
}
<h2 id="scrolllabel">Scroll down to know more</h2>
<b id="the_down_arrow">↓</b>
但结果是：
英文:
I'm using gridding and want the following to be bottom and center but they are appearing at the left:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
.body {
margin: 0;
background-color: rgb(255, 237, 237);
display: grid;
grid-template-rows: 10vh 48vh 21vh 21vh;
grid-template-columns: 98vi;
color: white;
}
#scrolllabel {
color: rgb(19, 1, 1);
grid-row: 3;
grid-column: 1;
z-index: 100;
font-family: Arial;
place-content: center;
place-self: center;
align-self: center;
font-size: 25px;
border-width: 0;
}
<!-- language: lang-html -->
<h2 id="scrolllabel">Scroll down to know more</h2>
<b id="the_down_arrow">&darr;</b>
<!-- end snippet -->
but the result is:
答案1
得分: 1
You can use position属性而不是grid。
------ HTML---------
<div class="hero-container">
<div>
<h2 id="scrolllabel">向下滚动了解更多</h2>
<b id="the_down_arrow">↓</b>
</div>
</div>
------ Style ------
.hero-container {
height: 500px; /*根据您的需求*/
width: 100%;
background-color: lightskyblue;
position: relative; /*重要*/
}
.hero-container > div {
position: absolute; /*重要*/
bottom: 10px; /*根据您的需求*/
/*对齐最重要的部分*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
尝试将此代码应用到您的应用程序中。
英文:
You can use position attribute instead of grid.
------ HTML---------
<div class="hero-container">
<div >
<h2 id="scrolllabel" >Scroll down to know more</h2>
<b id="the_down_arrow">&darr;</b>
</div>
</div>
------ Style ------
.hero-container {
height: 500px; /*as per your requirement*/
width: 100%;
background-color: lightskyblue;
position: relative; /*Important*/
}
.hero-container > div {
position: absolute; /*Important*/
bottom: 10px; /*as per your requirement*/
/*Most important to align*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
Try this code to your app.
答案2
得分: 0
请尝试以下代码。我现在有点忙，所以只分享了代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试</title>
<style type="text/css">
.body {
margin: 0;
background-color: rgb(255, 237, 237);
display: grid;
grid-template-rows: 10vh 48vh 21vh 21vh;
grid-template-columns: 98vi;
color: white;
}
.hero-container{
display: grid;
}
#scrolllabel {
color: rgb(19, 1, 1);
grid-row: 3;
grid-column: 1;
z-index: 100;
font-family: Arial;
place-content: center;
place-self: center;
align-self: center;
font-size: 25px;
border-width: 0;
}
#the_down_arrow {
color: rgb(19, 1, 1);
grid-row: 4;
grid-column: 1;
z-index: 100;
font-family: Arial;
place-content: center;
place-self: center;
align-self: center;
font-size: 25px;
border-width: 0;
}
</style>
</head>
<body>
<div class="hero-container">
<h2 id="scrolllabel" >向下滚动了解更多</h2>
<b id="the_down_arrow">↓</b>
</div>
</body>
</html>
英文:
Try this code please. I am little busy now, so I shared code only.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<style type="text/css">
.body {
margin: 0;
background-color: rgb(255, 237, 237);
display: grid;
grid-template-rows: 10vh 48vh 21vh 21vh;
grid-template-columns: 98vi;
color: white;
}
.hero-container{
display: grid;
}
#scrolllabel {
color: rgb(19, 1, 1);
grid-row: 3;
grid-column: 1;
z-index: 100;
font-family: Arial;
place-content: center;
place-self: center;
align-self: center;
font-size: 25px;
border-width: 0;
}
#the_down_arrow {
color: rgb(19, 1, 1);
grid-row: 4;
grid-column: 1;
z-index: 100;
font-family: Arial;
place-content: center;
place-self: center;
align-self: center;
font-size: 25px;
border-width: 0;
}
</style>
</head>
<body>
<div class="hero-container">
<h2 id="scrolllabel" >Scroll down to know more</h2>
<b id="the_down_arrow">&darr;</b>
</div>
</body>
</html>
答案3
得分: 0
尝试将其放入一个容器并使用 flexbox。
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>order</title>
<style>
.body {
margin: 0;
overflow: hidden;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: red;
}
</style>
</head>
<body>
<div class="container">
<h2 id="scrolllabel">向下滚动以了解更多</h2>
<b id="the_down_arrow">↓</b>
</div>
</body>
</html>
英文:
Try wrapping it in a container and using flexbox.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>order</title>
<style>
.body {
margin: 0;
overflow: hidden;
}
.container {
display:flex;
justify-content:center;
align-items:center;
width: 100%;
height: 100vh;
background: red;
}
</style>
</head>
<body>
<div class="container">
<h2 id="scrolllabel">Scroll down to know more</h2>
<b id="the_down_arrow">&darr;</b>
</div>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论