文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用flexbox时，图像未在div中居中

问使用flexbox时，图像未在div中居中
EN

Stack Overflow用户
提问于 2019-12-09 19:59:32
回答 2查看 69关注 0票数 0

我尝试放置一个包含三个元素的行，在屏幕边框和国家之间留出一些填充，并将图像留在屏幕的中心。到目前为止，这是我所拥有的代码片段：

html

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="skoreStyle.css">
    <title>Skore</title>
</head>

<body>
    <div class=columns>
        <div class="col col-1" id="RightName">SOLDATOVA</div>
        <div class="col col-2" id = LeftName>DROR Y B</div>
    </div>


    <div class=columns>
        <div class="col country-1">45</div>

        <div class="col country-2">0</div>

    </div>


    <div class=columns>
        <div class="score-1">9</div>

        <div class="round-clock">
            <div class="round">T1</div>
            <div class="clock">3:00</div>
        </div>

        <div class="score-2">8</div>
    </div>

    <div class=columns>
            <div class=country>RUS</div>
            <div class=logo> 
                <img src="res/icon.png"> </img>
             </div>
            <div class=country>ISR</div>
        </div>


    <script>
        require('electron').ipcRenderer.on('update', (event, msg) => {
            console.log(msg);
            document.getElementById("RightName").innerHTML = msg["RightName"];
            document.getElementById("LeftName").innerHTML = msg["LeftName"]; 
            document.getElementsByClassName("clock")[0].innerHTML = msg["Stopwatch"];
    });
    </script>


</body>
</html>

和样式表

代码语言：javascript
复制
html{
    width: 100%;
    height:100%;
    background:black;
    font-family: Impact;
    margin: 0px;
}

.columns{
    display:flex;
    justify-content: space-between;

}


.col-1{
    display:flex;
    align-items: center;
    justify-content: center;

    width:50%;
    background: green;
    color: white;
    height: 25vh;
    font-size: calc(5vw + 5vh + 2.5vmin);
    min-width: 200px;
    min-height:100px;

}

.col-2{
    display:flex;
    align-items: center;
    justify-content: center;

    width:50%;
    color:white;
    background: red;
    height:25vh;
    font-size: calc(5vw + 5vh + 2.5vmin);
    min-width: 200px;
    min-height:100px;

}

.score-1 {
    display:flex;
    align-items:center;
    justify-content: center;
    color:white;
    background:black;
    height:40vh;
    width:30%;
    min-width: 200px;
    min-height:100px;
    border:20px solid white;
    font-size:calc(12vw + 12vh + 2.5vmin);
}

.clock {
    display:flex;
    align-items:center;
    justify-content: center;
    vertical-align:middle;
    height:28vh;
    width:60vh;
    font-size: calc(8vw + 8vh + 2.5vmin);
    background:black;
    color:cadetblue;

}

.score-2 {
    display:flex;
    align-items:center;
    justify-content: center;
    color:white;
    background:black;
    height:40vh;
    width:30%;
    min-width: 200px;
    min-height:100px;
    border:20px solid white;
    font-size:calc(12vw + 12vh + 2.5vmin);
}


.round-clock {
    flex-wrap: wrap;
    flex-direction: column;
    border:20px solid white;
}

.round {
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    background:navy;
    font-size:calc(2vw + 2vh + 2.5vmin);
}

.country{
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    font-size:calc(4vw + 4vh + 2.5vmin);
    flex-direction: column;
    padding: 0.8vw 8vw 0.8vw 8vw;
}

.logo{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    width:6vw;
}

我遇到的问题是图像没有居中，它被填充到右边，我不知道为什么，因为我使用了类似的方法将其他行居中，它工作得很好。有人能解释我的这种行为吗？谢谢

编辑:这是图像

​

底部的徽标放错了一点位置。

html
css
EN

回答 2

Stack Overflow用户

发布于 2019-12-09 20:19:19

下面是代码。希望这将有助于you.If的任何变化，然后请让我知道。

https://jsfiddle.net/xqto1wa5/1/

​

代码语言：javascript
复制
html{
    width: 100%;
    height:100%;
    background:black;
    font-family: Impact;
    margin: 0px;
}

.columns{
    display:flex;
    justify-content: space-between;

}


.col-1{
    display:flex;
    align-items: center;
    justify-content: center;

    width:50%;
    background: green;
    color: white;
    height: 25vh;
    font-size: calc(5vw + 5vh + 2.5vmin);
    min-width: 200px;
    min-height:100px;

}

.col-2{
    display:flex;
    align-items: center;
    justify-content: center;

    width:50%;
    color:white;
    background: red;
    height:25vh;
    font-size: calc(5vw + 5vh + 2.5vmin);
    min-width: 200px;
    min-height:100px;

}

.score-1 {
    display:flex;
    align-items:center;
    justify-content: center;
    color:white;
    background:black;
    height:40vh;
    width:30%;
    min-width: 200px;
    min-height:100px;
    border:20px solid white;
    font-size:calc(12vw + 12vh + 2.5vmin);
}

.clock {
   text-align:center;
    width:60vh;
    font-size: calc(8vw + 8vh + 2.5vmin);
    background:black;
    color:cadetblue;

}

.score-2 {
    display:flex;
    align-items:center;
    justify-content: center;
    color:white;
    background:black;
    height:40vh;
    width:30%;
    min-width: 200px;
    min-height:100px;
    border:20px solid white;
    font-size:calc(12vw + 12vh + 2.5vmin);
}


.round-clock {
    flex-wrap: wrap;
    flex-direction: column;
    border:20px solid white;
}

.round {
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    background:navy;
    font-size:calc(2vw + 2vh + 2.5vmin);
}

.country{
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    font-size:calc(4vw + 4vh + 2.5vmin);
    flex-direction: column;
    padding: 0.8vw 8vw 0.8vw 8vw;
}
代码语言：javascript
复制
<div class=columns>
        <div class="col col-1" id="RightName">SOLDATOVA</div>
        <div class="col col-2" id = LeftName>DROR Y B</div>
    </div>


    <div class=columns>
        <div class="col country-1">45</div>

        <div class="col country-2">0</div>

    </div>


    <div class=columns>
        <div class="score-1">9</div>

        <div class="round-clock">
            <div class="round">T1</div>
            <div class="clock">3:00</div>
        </div>

        <div class="score-2">8</div>
    </div>

    <div class=columns>
            <div class=country>RUS</div>
            <div class=logo> 
                <img src="https://dummyimage.com/150x100/ff00ff/000000.png"> </img>
             </div>
            <div class=country>ISR</div>
        </div>

​

票数 0
EN

Stack Overflow用户

发布于 2019-12-10 00:56:54

最终起作用的是以下内容

代码语言：javascript
复制
.bottomColumn{
    display: flex;
    justify-content: flex-start; 
    position: relative;   
}

.countryLeft{
    justify-content: flex-start;  
    position: relative;    
    color:white;
    font-size:calc(4vw + 4vh + 2.5vmin);
    padding-left: calc(4vh + 7vw);
}

.countryRight{
    margin-left: auto;  
    flex: 0 1 auto;
    color:white;
    font-size:calc(4vw + 4vh + 2.5vmin);
    padding-right: calc(4vh + 7vw);
}

.logo{
    flex: 0 1 auto;
    position: absolute; 
    left: 50%;
    transform: translateX(-50%);
    padding-top: 6vh;
}

.logoImage{
    width:15vh;
    height:auto;
}

将徽标置于中心位置，然后左右移动文本

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

https://stackoverflow.com/questions/59248482

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

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