CODEWITHSUNDEEP
jquerycsshtmltwitter-bootstrap
leoarce
leoarce

Reputation: 549

how do you center and left align columns, at the same time, in bootstrap or regular html5?

remember the days of tables? remember how easy it was to make things happen, even if it was junky code? then when divs and css became the standard, there were just some things that were not so easy to implement. case in point...

how do i do this in bootstrap? if bootstrap does not have this built in, then how is it done with regular html5, while still keeping responsive feature?

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><table align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><p>a</p>
      <p>abcd</p>
      <p>ab</p>
      <p>abc</p></td>
    </tr>
  </table></td>
<td valign="top"><table align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><p>ab</p>
      <p>abc</p>
      <p>abcd</p>
      <p>a</p></td>
    </tr>
  </table></td>
<td valign="top"><table align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><p>abc</p>
      <p>a</p>
      <p>abc</p>
      <p>abcd</p></td>
    </tr>
  </table></td>
<td valign="top"><table align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><p>abcd</p>
      <p>ab</p>
      <p>a</p>
      <p>abc</p></td>
    </tr>
  </table></td>
</tr>
</table>

here is bootstrap2 columns (not bootstrap3), but as you know the content is left aligned in each column, and even if we could center the content of each column, that's not what i want. i want the content to be centered in each column and each new line should be left aligned. also as an extra thing, bootstrap creates a left-margin from the 2nd column to the last column. to get exact centering, i would think that those left margins would need to go away.

<div class="row-fluid">
<div class="span3">
  <p>a</p>
  <p>abcd</p>
  <p>ab</p>
  <p>abc</p>
</div>
<div class="span3">
  <p>ab</p>
  <p>abc</p>
  <p>abcd</p>
  <p>a</p>
</div>
<div class="span3">
  <p>abc</p>
  <p>a</p>
  <p>abc</p>
  <p>abcd</p>
</div>
<div class="span3">
  <p>abcd</p>
  <p>ab</p>
  <p>a</p>
  <p>abc</p>
</div>
</div>

here is fiddle of the above:

http://jsfiddle.net/C4926/3/

same jsfiddle, but with borders on the table:

http://jsfiddle.net/C4926/4

Upvotes: 0

Views: 790

Answers (2)

Tricky12
Tricky12

Reputation: 6820

Alright, it looks like you have the following code inside of bootstrap-combined.min.css which is overriding the width that span3 uses:

[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
    float: none;
    display: block;              /* Needs to be inline-block */
    width: 100%;                 /* Overrides width you need */
    margin-left: 0px;
    box-sizing: border-box;
}

I believe that this will fix your problem:

.row-fluid .span3 {
    width: 23%;             /* Correct width for span3 */
    display: inline-block;  /* Allows columns to be inline */
}

To get your text aligned center-left, you can add the following css:

.row-fluid div[class*="span"] p {
    width: 25%;
    margin: 10px auto;
}

Updated JSFiddle

EDIT/Alternative Solution - Get the regular (non-combined) version of bootstrap

Using the original version of bootstrap, found here you can avoid the span classes and use col-xx-xx and then align the text within it using text-center and text-left. New JSFiddle

<div class="row-fluid">
    <div class="col-xs-3 text-center">
        <div class="inline text-left">
          <p>a</p>
          <p>abcd</p>
          <p>ab</p>
          <p>abc</p>
        </div>
    </div>
    <div class="col-xs-3 text-center">
        <div class="inline text-left">
          <p>ab</p>
          <p>abc</p>
          <p>abcd</p>
          <p>a</p>
        </div>
    </div>
    <div class="col-xs-3 text-center">
        <div class="inline text-left">
          <p>abc</p>
          <p>a</p>
          <p>abc</p>
          <p>abcd</p>
        </div>
    </div>
    <div class="col-xs-3 text-center">
        <div class="inline text-left">
          <p>abcd</p>
          <p>ab</p>
          <p>a</p>
          <p>abc</p>
        </div>
    </div>
</div>

One small CSS addition for aligning the text:

.inline {
    display: inline-block;
}

Upvotes: 1

NullPointer
NullPointer

Reputation: 442

You could do something like this:

.span3 p {
    margin-left: -10px;
    padding-left: 50%;
}

Where you replace the -10px of the margin left programmatically with javascript to always be in the half of the widest <p> element width within that span3.

I admit that this is not the prettiest solution, but sort of gets done what you are trying to achieve.

Upvotes: 1

Related Questions