首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在CSS中使div在BG图像中居中

在CSS中使div在BG图像中居中
EN

Stack Overflow用户
提问于 2018-06-17 00:44:01
回答 1查看 982关注 0票数 1

我的问题是,我正在努力保持我的riot游戏文本流畅,当我调整我的浏览器时,它似乎停留在它所在的位置。无论是左侧还是右侧,通常右侧从S的末端到窗口的一侧有更多的空间。

代码语言:javascript
复制
// 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;
      }
代码语言:javascript
复制
<section class="showcase">
    <div class="welcome-headline">
        <h6>Welcome</h6>
    </div>
    <div class="info-text">
        <p>
            Riot Games
        </p>
    </div>
</section>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-17 01:05:12

您可以使用flexbox,在容器上使用此属性(在本例中为背景图像):

代码语言:javascript
复制
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

示例:

代码语言:javascript
复制
.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;
    }
}
代码语言:javascript
复制
<section class="showcase">
    <div class="welcome-headline">
        <h6>Welcome</h6>
    </div>
    <div class="info-text">
        <p>
            Riot Games
        </p>
    </div>
</section>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50889796

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档