Menu
I use bootstrap and am trying to center a div(span7) like that:
<div class="row-fluid"> <div id="main" class="span7"> Lorem ipsum dolor sit amet </div> </div> 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).
333
Add d-flex align-items-center justify-content-center classes to the parent element to center its content vertically and horizontally.
One way to vertically center is to use my-auto . This will center the element within it's flexbox container (The Bootstrap 4 . row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
You have to set a width to the div, otherwise it will span 100% because it's a block element. You should check out hot flexbox works, there is no "magic" way to add a class on a div to center it (and only the div). You can center the div inside a flex-container tough.
If he wants the h3 to be vertically centered, then a simple text-align: center; would be enough on the div. mx-auto is not needed on any of the classes. If he is using bootstrap then there is the "text-center" class which will place the text vertically center.
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; } 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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
