我正在使用 bootstrap 并尝试对齐行内的内容。我意识到我还没有用完所有的列空间，这很好。我只想让东西居中。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
#headings {
text-align: center;
}
#row-container {
text-align: center;
}
#take-from-break, #take-from-session {
float: right;
}
</style>
<html>
<div class="container-fluid">
<div class="container">
<div id="headings">
<h1>Pomodoro Clock</h1>
<h3>A Pomodoro Clock helps you break down work into intervals, separated by short breaks.</h3>
</div>
<div id="setup">
<div id="row-container">
Enter time in minutes
<div class="row">
<div class="col-md-1"><button id="take-from-break">-</button></div>
<div class="col-md-2"><input type="number" placeholder="Break Length"></div>
<div class="col-md-1"><button id="add-to-break">+</button></div>
<div class="col-md-2"></div> <!-- blank space -->
<div class="col-md-1"><button id="take-from-session">-</button></div>
<div class="col-md-2"><input type="number" placeholder="Session Length"></div>
<div class="col-md-1"><button id="add-to-session">+</button></div>
</div>
</div>
</div>
<div id="clock-holder">
<button id="clock"></button>
</div>
</div>
</div>
</html>
这是 JSFiddle:https://jsfiddle.net/c8wLxkob/
这是我得到的页面图像:
最佳答案
因为看起来您并没有特别使用 Bootstrap 来调整列的大小，所以居中对齐框的一种方法是使用 display: flex 和 justify-内容:居中。我在垫片中保留了 Bootstrap 尺寸，所以结果仍然是响应式的。
结果截图:
这里有一个演示来展示我的意思:
#headings {
text-align: center;
}
#row-container {
text-align: center;
}
.wrap {
display: flex;
justify-content: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="container">
<div id="headings">
<h1>Pomodoro Clock</h1>
<h3>A Pomodoro Clock helps you break down work into intervals, separated by short breaks.</h3>
</div>
<div id="setup">
<div id="row-container">
Enter time in minutes
<div class="wrap">
<div class="center-wrap">
<button id="take-from-break">-</button>
<input type="number" placeholder="Break Length">
<button id="add-to-break">+</button>
</div>
<div class="col-md-2"></div>
<div class="center-wrap">
<button id="take-from-session">-</button>
<input type="number" placeholder="Session Length">
<button id="add-to-session">+</button>
</div>
</div>
</div>
</div>
<div id="clock-holder">
<button id="clock"></button>
</div>
</div>
</div>JSFiddle 版本:https://jsfiddle.net/re8jzxer/
关于html - 行元素不会对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37534717/