行要素が整列しない

私はブートストラップを使用しています。私は自分の行の中のものを整列しようとしています。私はすべての列スペースを使い果たしていないことを理解しています。それは問題ありません。私はちょうど中心的なものをしたい。ここで行要素が整列しない

<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です：あなたがブートストラップを使用しているように見えないので

出典

2016-05-30 Human Cyborg Relations

：https://jsfiddle.net/c8wLxkob/

そして、ここでは、私が取得ページの画像です特に列のサイズを変更するには、ボックスを中央揃えにする方法の1つはdisplay: flexと一緒にjustify-content: centerを使用することです。私はスペーサにブートストラップのサイジングを保持しているので、結果はまだ敏感です。結果の

スクリーンショット：ここ

は私が何を意味するか表示するデモです：

#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

答えて

関連する問題