我试图用三个元素放置一行，在屏幕边框和国家/地区之间留一些填充，并将图像留在屏幕中央。到目前为止，这是我所拥有的片段:
html
<!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>
和样式表
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;
}
我遇到的问题是图像没有居中，向右填充，我不知道为什么，因为我使用了类似的方法将其他行居中并且它工作得很好。 有人可以向我解释这种行为吗？谢谢
编辑:
这是图像
底部的logo有点偏右
最佳答案
这是代码。希望对您有所帮助。如果有任何更改，请告诉我。
https://jsfiddle.net/xqto1wa5/1/
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;
}<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>关于html - 使用 flexbox 的图像不在 div 中居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59248482/