Human Cyborg Relations Human Cyborg Relations - 6 months ago 10
CSS Question

Row elements won't align

I'm using bootstrap and I'm trying to align the stuff inside my row. I realize that I haven't used up all the column space, and that's fine. I just want the stuff centered.

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


Here is the JSFiddle: https://jsfiddle.net/c8wLxkob/

And here is the image of the page that I get:

Result

Answer

Since it doesn't look like you're using Bootstrap to size your columns in particular, one way to center-align your boxes is to use display: flex along with justify-content: center. I've retained the Bootstrap sizing in the spacer, so the result is still responsive.

Screenshot of result:

Screenshot of result

Here is a demo to show what I mean:

    #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 Version: https://jsfiddle.net/re8jzxer/

Comments