How do I center a Bootstrap div with a spanX class

Question

I use bootstrap and am trying to center a div span7  like that    lt div class  row-fluid  gt       lt div id  main  class  span7  gt          Lorem ipsum dolor sit amet      lt  div gt   lt  div gt    my css code is    main      margin 0px auto      But it isn t set at the center  How can i set center   EDIT  span7 is now col-7 in Bootstrap 4 and row-fluid is deprecated Instead of this  use container-fluid and row

User · Answer

If anyone wants the true solution for centering BOTH images and text within a span using bootstrap row-fluid, here it is (how to implement this and explanation follows my example):

css

div.row-fluid [class*="span"] .center-in-span { 
   float: none; 
   margin: 0 auto; 
   text-align: center; 
   display: block; 
   width: auto; 
   height: auto;
}

html

<div class="row-fluid">
   <div class="span12">
      <img class="center-in-span" alt="MyExample" src="/path/to/example.jpg"/>
   </div>
</div>

<div class="row-fluid">
   <div class="span12">
      <p class="center-in-span">this is text</p>
   </div>
</div>

USAGE: To use this css to center an image within a span, simply apply the .center-in-span class to the img element, as shown above.

To use this css to center text within a span, simply apply the .center-in-span class to the p element, as shown above.

EXPLANATION: This css works because we are overriding specific bootstrap styling. The notable differences from the other answers that were posted are that the width and height are set to auto, so you don't have to used a fixed with (good for a dynamic webpage). also, the combination of setting the margin to auto, text-align:center and display:block, takes care of both images and paragraphs.

Let me know if this is thorough enough for easy implementation.

User · Answer

Update  As of BS3 there s a  center-block helper class  From the docs      Classes  center-block     display  block    margin-left  auto    margin-right  auto        Usage as mixins  element      center-block        There is hidden complexity in this seemingly simple problem  All the answers given have some issues    1  Create a Custom Class  Major Gotcha   Create  col-centred class  but there is a major gotcha    col-centred      float  none  important     margin  0 auto      lt  -- Bootstrap 3 -- gt   lt div class  col-lg-6 col-centred  gt    Centred content   lt  div gt   lt  -- Bootstrap 2 -- gt   lt div class  span-6 col-centred  gt    Centred content   lt  div gt    The Gotcha  Bootstrap requires columns add up to 12  If they do not they will overlap  which is a problem   In this case the centred column will overlap the column above it  Visually the page may look the same  but mouse events will not work on the column being overlapped  you can t hover or click links  for example   This is because mouse events are registering on the centred column that s overlapping the elements you try to click   The Fixes  You can resolve this issue by using a clearfix element  Using z-index to bring the centred column to the bottom will not work because it will be overlapped itself  and consequently mouse events will work on it    lt div class  row  gt     lt div class  col-lg-12  gt      I get overlapped by  col-lg-7 centered  unless there s a clearfix     lt  div gt     lt div class  clearfix  gt  lt  div gt     lt div class  col-lg-7 centred  gt     lt  div gt   lt  div gt    Or you can isolate the centred column in its own row    lt div class  row  gt     lt div class  col-lg-12  gt     lt  div gt   lt  div gt   lt div class  row  gt     lt div class  col-lg-7 centred  gt      Look I am in my own row     lt  div gt   lt  div gt    2  Use col-lg-offset-x or spanx-offset  Major Gotcha    lt  -- Bootstrap 3 -- gt   lt div class  col-lg-6 col-lg-offset-3  gt    Centred content   lt  div gt   lt  -- Bootstrap 2 -- gt   lt div class  span-6 span-offset-3  gt    Centred content   lt  div gt    The first problem is that your centred column must be an even number because the offset value must divide evenly by 2 for the layout to be centered  left right    Secondly  as some have commented  using offsets is a bad idea  This is because when the browser resizes the offset will turn into blank space  pushing the actual content down the page   3  Create an Inner Centred Column  This is the best solution in my opinion  No hacking required and you don t mess around with the grid  which could cause unintended consequences  as per solutions 1 and 2    col-centred      margin  0 auto      lt div class  row  gt     lt div class  col-lg-12  gt       lt div class  centred  gt          Look I am in my own row       lt  div gt     lt  div gt   lt  div gt

User · Answer

Define the width as 960px  or whatever you prefer  and you re good to go    main    margin  0 auto  important   float  none  important   text-align  center   width  960px       I couldn t figure this out until I fixed the width  nothing else worked

User · Answer

Incidentally  if your span class is even-numbered  e g  span8  you can add an offset class to center it      for span8 that would be offset2  assuming the default 12-column grid   for span6 it would be offset3 and so on  basically  half the number of remaining columns if you subtract the span-number from the total number of columns in the grid    UPDATE Bootstrap 3 renamed a lot of classes so all the span classes should be col-md-  and the offset classes should be col-md-offset-   assuming you re using the medium-sized responsive grid   I created a quick demo here  hope it helps  http   codepen io anon pen BEyHd

User · Answer

Twitter s bootstrap  span classes are floated to the left so they won t center by usual means  So  if you want it to center your span simply add float none to your  main rule   CSS   main    margin 0 auto   float none

[css] How do I center a Bootstrap div with a 'spanX' class?

Examples related to css

Examples related to twitter-bootstrap