Question

我正在使用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/

以下是我得到的页面图片：

Answer 1

由于看起来您并没有使用Bootstrap来特别调整列的大小，因此将display: flex与justify-content: center一起使用#headings { text-align: center; } #row-container { text-align: center; } .wrap { display: flex; justify-content: center; }。我在间隔器中保留了Bootstrap尺寸，因此结果仍然响应。

结果截图：

这是一个展示我的意思的演示：

＆＃13;

<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>

＆＃13;

:first

＆＃13;

JSFiddle版本：https://jsfiddle.net/re8jzxer/

行元素不会对齐

1 个答案: