CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
NewBee
NewBee

Reputation: 103

Text that is centered and right-aligned not rendered on the same line

I need to get text in center as well as on the left side. If someone can help me rectify the error where I am going wrong ?

Pictorial way to be more precise.

Pictorial way to be more precise.

Running fiddle

Here's HTML:

<div class="container" id="values">
  <div class="row">
    <div class="header col-md-10 col-md-offset-1">
      <div class="center-block" style='background:yellow'>
        <div class="text-center">
          <div id="main-text">
            <h3>TEXT</h3>
          </div>

          <div class="side_section">
            <div id="text2" class="pull-right clearfix" style='background:blue'>
              Text2
            </div>

            <div id="text1" class="pull-right clearfix" style='background:blue'>
              Text1
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 56

Answers (3)

Taylor D. Edmiston
Taylor D. Edmiston

Reputation: 13036

I think this is what you're looking for. The first row demos having left, center, and right aligned text on the same row. The second row demos just having center and right with a grid offset.

Using grids in Bootstrap (because I saw it in your sample code) is one way to achieve this effect, but there are others too. If you're not using a framework, you could use CSS floats directly.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <!-- Example 1 -->
  <div class="row">
    <div class="col-xs-4 text-left">
      <p>left text</p>
    </div>
    <div class="col-xs-4 text-center">
      <p>center text</p>
    </div>
    <div class="col-xs-4 text-right">
      <p>right text</p>
    </div>
  </div>

  <!-- Example 2 -->
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4 text-center">
      <p>center text</p>
    </div>
    <div class="col-xs-4 text-right">
      <p>right text</p>
    </div>
  </div>

  <!-- Example 3 -->
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4 text-center">
      <p>center text</p>
    </div>
    <div class="col-xs-4 text-right">
      <span>right 1</span>
      <span>right 2</span>
    </div>
  </div>

  <!-- Example 4 -->
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4 text-center">
      <p>center text</p>
    </div>
    <div class="col-xs-4 text-right">
      <p style="display: inline;">right 1</p>
      <p style="display: inline;">right 2</p>
    </div>
  </div>

  <!-- Example 5 -->
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4 text-center">
      <p>center text</p>
    </div>
    <div class="col-xs-4 text-right">
      <p class="pull-right">right 2</p>
      <p class="pull-right">right 1</p>
    </div>
  </div>

</div>

Side note: I only used the xs-* grid classes because the Stack Overflow snippet renders in such a small window. The concept works the same with md-* or whichever is best for your design.

Upvotes: 2

Mustapha Larhrouch
Mustapha Larhrouch

Reputation: 3403

add this style :

.side_section{
    position: absolute;
    top: 0px;
    right: 20px;
}

https://jsfiddle.net/gueqvxua/2/

Upvotes: 1

Robert
Robert

Reputation: 6967

#values {
  background: #eee;
}

#values .col-md-10 {
  background: #ddd;
}

#values h3 {
  background: #ccc;
}

#values .list-inline {
  padding: 25px;
  margin: 0;
  background: #bbb;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" id="values">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline pull-right text-right">
        <li><a href="">Test</a></li>
        <li><a href="">Test</a></li>
      </ul>

      <h3 class="text-center">TEXT</h3>
       
    </div>
  </div>
</div>

Some CSS on StackOverflow seems to create an alignment issue, but if you reference a Bootply example using the same code ( http://www.bootply.com/E8fPPsaz25 ) you'll see everything line up nicely.

Upvotes: 1

Related Questions