html – 行元素不会对齐

2019年7月28日 224次阅读

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

这是我得到的页面图像：

《html – 行元素不会对齐》

最佳答案 由于您看起来并不像使用Bootstrap来特别调整列的大小,因此使用display：flex和justify-content：center的方法是使用display：flex.我在间隔器中保留了Bootstrap尺寸,因此结果仍然响应.

结果截图：

《html – 行元素不会对齐》

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

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

点赞