使用CSS Grid对齐div盒的问题
我想使用Grid和Hero图像为我的博客构建自定义WordPress。使用CSS Grid对齐div盒的问题
这是我的HTML:
<div class="site-wrapper">
<div class="section site-menu">MenuItem 1 | MenuItem 2 | MenuItem 3 | MenuItem 4</div>
<div class="section site-header">
<div class="hero">
<div class="hero-content">
<h1>If you can dream it, you can do it...</h1>
<p class="subhead">lets do it !</p>
</div>
<div class="bottom-right">This text should be positioned at the bottom right of the Hero Image</div>
</div>
</div>
<div class="section undefined">
<div class="undefined-content">
undefined
</div>
</div>
<div class="section site-footer">Footer</div>
</div>
这是CSS代码:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.site-wrapper {
display: grid;
grid-template-columns: 1fr;
}
.site-menu {
background-color:#000;
color:#fff;
position: absolute;
padding: 8px 20px 9px;
width: 100vw;
}
.hero {
background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg');
background-size:cover;
background-position: center;
width: 100wh;
height: 100vh;
display: flex;
}
.hero-content {
background-color:#000;
color:#fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-directon: column;
margin: auto;
}
我还创建了一个codepen它。
我有多个问题:
我的菜单是不是我的形象宽。
我的文字在中间并没有对齐我的英雄形象的中心,
h1
和<p class="subhead">
并排而不是彼此之间。<div class="bottom-right">
不可见!我想把它放在图像的右下角,它应该在上面。
我附上了一个codepen以及我的更改。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.site-wrapper {
position: relative;
display: grid;
grid-template-columns: 1fr;
}
.site-menu {
background-color:#000;
color:#fff;
position: absolute;
padding: 8px 20px 9px;
width: 100%;
z-index: 1;
}
.hero {
background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg');
background-size:cover;
background-position: center;
width: 100wh;
height: 100vh;
display: flex;
}
.hero-content {
background-color:#000;
color:#fff;
display: block;
align-items: center;
justify-content: center;
text-align: center;
flex-directon: column;
margin: auto;
}
.bottom-right {
position: absolute;
right: 0;
margin-top: -1.2em;
background: black;
color: white;
}
https://codepen.io/bartholomewdavid/pen/Xedjow
1)当使用100vw的宽度它可能会导致问题。原因是因为它占了包含滚动条的视口的100%。所以1宽度的滚动条被添加。我将它切换到100%
2)将内容置于Flexbox中并不适用于某些原因。 第一个是有两件事是水平居中给它的抵消外观。
我将.bottom-left组件移出其父组件,并将其垂直偏移一点以显示在背景图片的顶部。
最后一件事是在子标题旁出现居中的文字。为了解决这个问题,我只是删除了显示:flex就可以了。
这是一个很好的做法,通过使用'margin-top:-1.2em;'将英语图像右下角的'右下角'对齐。没有其他方法可以做到这一点吗? –
更改如下代码:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.site-wrapper {
display: grid;
grid-template-columns: 1fr;
}
.site-menu {
background-color:#000;
color:#fff;
position: absolute;
padding: 8px 20px 9px;
width: 100%;
}
.hero {
background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg');
background-size:cover;
background-position: center;
width: 100wh;
height: 100vh;
display: flex;
}
.hero-content {
background-color:#000;
color:#fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
margin: auto;
}
.bottom-right {
position: absolute;
bottom: 0;
right: 0;
}
它解决你的问题吗? –
右下角div不可见 –
因为你的代码中使用CSS网格而不是Flexbox的,因此,我编辑的文本。 – LGSon