CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Johnny Metz
Johnny Metz

Reputation: 6045

Center-align elements on the same line and in the same container

Is there any way to left-align, center-align, and right-align elements on the same line without separating the elements into separate containers. To right-align an element, I know I can float the element by using pull-right directly on the element; but I'm having trouble centering an element. I'm using bootstrap but a pure css solution would be fine as well.

In other words, I know this works: https://jsfiddle.net/u69rz06s/3/

<div class="row">
  <div class="col-xs-4">
    <button>Button 1</button>
  </div>
  <div class="col-xs-4 text-center">
    <button>Button 2</button>
  </div>
  <div class="col-xs-4 text-right">
    <button>Button 3</button>
  </div>
</div>

But I looking for a solution that looks something like this (however, this currently does not work): https://jsfiddle.net/pvw1qL5v/2/

<div class="col-xs-12">
  <button>Button 1</button>
  <button style="text-align: center;">Button 2</button>
  <button class="pull-right">Button 3</button>
</div>

Upvotes: 0

Views: 101

Answers (1)

Chris Happy
Chris Happy

Reputation: 7295

Use display: flex and justify-content: space-between.

.col-xs-12 {
  display: flex;
  justify-content: space-between;
}
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button>Button 1</button>
      <button>Button 2</button>
      <button>Button 3</button>
    </div>
  </div>
</div>

JSfiddle

Upvotes: 2

Related Questions