如何居中对齐此html内容
如何居中对齐此html内容
提问于 2018-08-02 00:33:42
我希望我的html内容居中对齐，同时保持id game-inst的列结构，请随时编辑我的css代码，等待您的帮助，谢谢。
#score-container {
display: block;
width: 100%;
height: 100%;
text-align: center;
background-color: #1B2631;
color: #ffffff;
}
.key {
width: 40%;
display: inline-block;
}
.instruction {
display: inline-block;
width: 40%;
text-align: left;
}
#my-score,
#high-score,
#game-inst {
font-size: 1.25em;
padding: 0px 10px;
line-height: 1;
}<div id="score-container">
<div id="game-inst">
<div class="key">Key 4:</div>
<div class="instruction">Move UP</div>
<div class="key">Key 6:</div>
<div class="instruction">Move DOWN</div>
<div class="key">Key 5:</div>
<div class="instruction">PLAY/PAUSE</div>
</div>
<p id="my-score">123</p>
<p id="high-score">786</p>
</div>
回答 1
Stack Overflow用户
发布于 2018-08-02 01:11:52
我相信这就是你想要的。
#score-container {
top: 100px;
display: block;
position: relative;
left: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 10;
}
.key {
width: 30%;
display: inline-block;
float: left;
}
.instruction {
width: 70%;
display: inline-block;
float: left;
}
#score-box {
position: relative;
width: 300px;
margin-left: auto;
margin-right: auto;
padding: 0;
}
#game-inst:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#my-score,
#high-score,
#game-inst {
font-size: 1.25em;
padding: 0px 10px;
line-height: 1;
text-align: left;
}
#score-box p {
width: 42%;
display: inline-block;
text-align: left;
border: solid 1px silver;
}<div id="score-container">
<div id="score-box">
<div id="game-inst">
<div class="key">Key 4:</div>
<div class="instruction">Move UP</div>
<div class="key">Key 6:</div>
<div class="instruction">Move DOWN</div>
<div class="key">Key 5:</div>
<div class="instruction">PLAY/PAUSE</div>
</div>
<p id="my-score">123</p>
<p id="high-score">786</p>
</div>
</div>
注意.key、.instruction、#game-inst中的更改以及添加的game
#game-inst:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}它清除添加到键和指令类的浮点数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51638263
复制相关文章
相似问题