Menu
I have a problem when using a class to center my span :
.center {
float:none;
margin-left: auto;
margin-right: auto;
}
<div class="row-fluid">
<div class="center span5">
<button></button>
</div>
</div>
This does not work, apparently it is overridden by bootstrap row-* CSS. However if I include the same style in the div directly (style="...") it works.
I think it doesn't work because it doesn't knows the width, so I tried to use an offset, but then when the button isn't centered as well as with the .CSS. I can't specify a width since my button width is set by external JavaScript.
How can I make the .center class work in that case?
625
Make sure you set a width on your col class, then text-align should work. Has to know where to center first. <span> elements will only be as wide as the content contained within. Changing to <div> will allow you to center the text because the <div> element will fill all of the space provided by it's parent.
To center an inline element like a link or a span or an img, all you need is text-align: center . For multiple inline elements, the process is similar. It's possible by using text-align: center .
Use d-flex justify-content-center on your column div. This will center everything inside that column. If you have text and image inside the column, you need to use d-flex justify-content-center and text-center .
Using CSS, you can center text in a div in multiple ways. The most common way is to use the text-align property to center text horizontally. Another way is to use the line-height and vertical-align properties. The last way exclusively applies to flex items and requires the justify-content and align-items properties.
You can center it with:
.center {
margin: 0 auto !important;
float: none !important;
}
JSFiddle
Or you can use:
.row-fluid [class*="span"].center, .center {
margin: 0 auto;
float: none;
}
I tend to avoid !important because you never know when it may differ with some other CSS. Interestingly, the above affect differs on both .row and .row-fluid.
95
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
