html - 引导文本中的文本-井不会居中
问题描述
我正在尝试创建一个虚拟轮盘赌。现在我的担忧是严格的审美。在右侧的文本井中,#chipsInv 中的数字不会居中,除非我放置了一个 html“中心”标签,然后由于某种原因它在底部创建了大量的空白空间。
这是我的代码,我省略了 Javascript,因为我认为它无关紧要:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#ball {
position: absolute;
left: 208px;
top: 40px;
z-index: 1;
width: 20px;
height: 20px;
transition: top 1s;
}
#wheel {}
form {}
.row {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5">
<img id="ball" src="ball.png" onclick="spin()"></img>
<img id="wheel" src="Rwheelbg.png" onclick="spin()"></img>
</div>
<div class="col-lg-1">
<button id="reset" onclick="reset()">Reset</button>
</div>
<div class="col-lg-6">
<div class="well well-lg">
<span><center>Chips</center></span>
<br>
<span style="font-size: 180px; text-align: center;" id="chipsInv">10</span>
<!-- Why won't this center!? -->
<br>
<span style="float:right;" id="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></span>
</div>
</div>
<!-- Row ends here -->
</div>
<p>Bet on:</p>
<form action="">
<input type="checkbox" name="21" value="310" id="310"> 21
<br>
<input type="checkbox" name="9" value="100" id="100"> 9
<br>
<input type="checkbox" name="14" value="120" id="120"> 14
<br>
<input type="checkbox" name="13" value="240" id="240"> 13
</form>
<p>Bet on up to four numbers. However, be warned, the more numbers you bet on, the lower your chip return will be.</p>
<!-- container ends here -->
</div>
</body>
</html>
解决方案
在 Bootstrap 中,尽可能/尽可能使用 Bootstrap 类来提供您正在寻找的样式,因为 Bootstrap 类旨在相互兼容。
<div class="col-lg-6">
<div class="well well-lg">
<div class="text-center">Chips</div>
<div class="text-center" style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
如果您想将示例中的所有内容都以文本居中,您只需在 well-lg 类旁边添加 text-center 类,如下所示:
<div class="col-lg-6">
<div class="well well-lg text-center">
<div>Chips</div>
<div style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
此外;
- 使用 Bootstrap,他们建议您尽可能使用 div,然后您可以通过修改这些 div 的类来指定不同的行为,例如“d-inline”或“d-block”。这就是我将您的跨度更改为 div 的原因。
- 确保您的 col-lg-6 div 包含在具有“row”类的 div 中,并且根据文档,这些 div 在添加时指定 col div 不超过 12。Bootstrap Grid Docs
推荐阅读
- android - 使用特定于 UI 的数据增强 PagedList 且不破坏 MVVM 模式的最佳方法
- python - 有没有更好的方法在 Python 中读取多个 txt 文件?
- java - 找不到文件声音,并返回 java.lang.NullPointer 异常
- macos - 在 MacOS 上批量重命名多个目录中的文件
- c - 文字 UTF-8 字符的数值
- r - Find stock market support trend lines more efficiently in R Tidyquant
- javascript - 预订表格提示:插入日历(数据选择器),插入时间选择器(?)
- powershell - 如何从 Jenkins 管道编辑 Windows 中文件的内容?
- php - 合并 2 个空值数组
- reactjs - setState 在 onChange 函数中不起作用