行元素不会对齐

我正在使用引导程序，并且正在尝试对齐我行内的内容。我意识到我没有用完所有的列空间，这很好。我只是想让东西为中心。行元素不会对齐

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

这里是页面的图像，我得到：

来源

2016-05-30 Human Cyborg Relations

由于它并不像你使用的引导要特别调整列的大小，一种方法是使用display: flex以及justify-content: center。我保留了间隔区中的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/

来源

2016-05-30 23:38:36

行元素不会对齐

回答

相关问题