-3

I have this button that I need centered in the space between two other div's. I'm not the primary developer on this project... I was just brought in to help bang out some new features really fast. I don't want to overhaul the html of the primary developer (who is still very active on this project), so instead of converting this to bootstrap rows and columns, is there a less invasive way to center this button?

(PS what you see in the snippet isn't what it actually looks like. We are missing some CSS. But it's close enough for what I need done.)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div>
    <div class="text-right">
        <div id="">
            <div>
                <strong>Exclude Customers With Tags:&nbsp;</strong>
                <select id="" multiple style="width:100px;"></select>
            </div>
        </div>
        <div class="pull-left" id="">
            <label>
                <input type="checkbox" value="" id="">
                some text 
             </label>
        </div>
<!-- This is what I am adding -->
        <div class="pull-left">
            <button id="" class="btn btn-primary btn-sm">Center Me</button>
        </div>
<!-- end/ This is what I am adding -->
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
Casey Crookston
  • 13,016
  • 24
  • 107
  • 193
  • Can we see the CSS ? –  Apr 10 '17 at 19:24
  • @Leon, sorry... I should have cleaned up more before posting. Refresh. The only CSS in play here is bootstrap. – Casey Crookston Apr 10 '17 at 19:26
  • You just want the button centered on the page? If so, if you look in the inspector the .pull-left class has a float:left !important; on it. Simply remove that and add text-align:center to the .pull-left class and the button will center on the page. However, if you just want it to affect that class only without affecting the other classes put an id on it and reference that id. – Jorden Apr 10 '17 at 19:42
  • Possible duplicate of [How to horizontally center a
    in another
    ?](http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div)
     – Ryan Apr 10 '17 at 19:56
  • Possible duplicate of [Twitter Bootstrap - how to center elements horizontally or vertically](https://stackoverflow.com/questions/10088706/twitter-bootstrap-how-to-center-elements-horizontally-or-vertically) – Jim G. Sep 30 '19 at 15:56

1 Answers1

1

i have removed the standard classes from bootstrap and display it with the flex 

.text-right {display: flex;
    flex-direction: row;
    justify-content: space-between;}`

here is a jsfiddle demo https://jsfiddle.net/jjx4cf8L/

Gallaoui
  • 501
  • 4
  • 19