在CSS中使div在BG图像中居中
在CSS中使div在BG图像中居中
提问于 2018-06-17 00:44:01
我的问题是，我正在努力保持我的riot游戏文本流畅，当我调整我的浏览器时，它似乎停留在它所在的位置。无论是左侧还是右侧，通常右侧从S的末端到窗口的一侧有更多的空间。
// The showcase is just the container
// containing the background image.
.showcase {
position: relative;
width: 100%;
height: 35.76em;
text-align: center;
background: url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
// Info Text is The Main Text
// I'm trying to keep centered and fluid **
.info-text {
color:white;
position: absolute;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 6.5em;
font-weight: bold;
margin: 0;
top: 15%;
left: 25%;
}
// I just ended up adding in the flex-box properties hoping to fix it,
// but im not too sure if it made things worse or actually helped out.
@media only screen and (max-width: 768px) {
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.info-text {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
height: 25vh;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 3.5em;
font-weight: bold;
top: 38%;
left: 10%;
margin: 0;
}<section class="showcase">
<div class="welcome-headline">
<h6>Welcome</h6>
</div>
<div class="info-text">
<p>
Riot Games
</p>
</div>
</section>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-17 01:05:12
您可以使用flexbox，在容器上使用此属性(在本例中为背景图像)：
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;示例：
.showcase {
position: relative;
width: 100%;
height: 35.76em;
text-align: center;
background: url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.info-text {
color: white;
position: absolute;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 6.5em;
font-weight: bold;
}
@media only screen and (max-width: 768px) {
.info-text {
font-size: 3.5em;
}
}<section class="showcase">
<div class="welcome-headline">
<h6>Welcome</h6>
</div>
<div class="info-text">
<p>
Riot Games
</p>
</div>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50889796
复制相关文章
相似问题
腾讯云开发者
