0

http://www.bootply.com/124116

I have two nested columns but I cannot seem to center their contents inside them. If I get rid of the "float: left", then it splits to two lines which I do not want. What do I need to do to center this? Just to be clear I want to center the contents of cas_subboxA and cas_subboxB which I added borders around.

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
            <div class="panel-heading">
                Calculator
            </div>
            <div class="panel-body">
                <form id="cas_form">
                    <div class="row" id="cas_input_row">
                        <div class="col-md-6" id="cas_subboxA">
                            <input class="form-control" id="cas_datepicker" type="text" placeholder="mm/dd/yyyy">
                            <button class="btn btn-default" id="cas_datebutton" type="button">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                            <div id="cas_radios">
                                <input name="operation" type="radio" value="plus">plus<br>
                                <input name="operation" type="radio" value="minus">minus
                            </div>
                        </div>
                        <div class="col-md-6" id="cas_subboxB">
                            <input name="daystoaddorsubtract" class="form-control" id="cas_text2" type="number" placeholder="#">
                            <div id="cas_radios">
                                <input name="cal_or_work" type="radio" value="calendar">calendar days<br>
                                <input name="cal_or_work" type="radio" value="work">work days
                            </div>
                        </div>
                    </div>
                    <div>
                        <div id="cas_buttons">
                            <button class="btn btn-success" type="submit"><i class="glyphicon glyphicon-ok"></i> Calculate Dates!</button> 
                            <button class="btn btn-default" type="reset"><i class="glyphicon glyphicon-remove"></i> Reset</button>
                        </div>
                    </div>
                </form>
            </div>
            </div>
        </div>
    </div>
</div>

CSS:

#cas_form {
    margin-top: 20px;
    text-align: center;

}

#cas_input_row {
    text-align: center;
}

#cas_datepicker {
    width: 110px;
    float: left;
}

#cas_datebutton {
    float: left;
}

#cas_radios {
    float: left;
    margin-top: -4px;
    margin-left: 20px;
    height: 40px;
    vertical-align: baseline;
    text-align: left;
}

#cas_subboxA, #cas_subboxB {
    text-align: center;
    border: solid 1px;
}

#cas_text2 {
    margin-left: 20px;
    width: 70px;
    float: left;
    text-align: center;

}

#cas_buttons {
    margin-top: 20px;
    text-align: center;
}
CarbonandH20
  • 361
  • 1
  • 3
  • 13

1 Answers1

0

Are you trying to center the content's inside your input fields or the panel-heading or both? Try adding a div .text-center center after your .container that'll center the panel heading. You can center the contents of your fields using .text-align: center on your #cas_datepicker hope this helps.

How do you get centered content using Twitter bootstrap?

Community
  • 1
  • 1
Ali
  • 157
  • 1
  • 4
  • 15
  • I am trying to center the content inside cas_subboxA and cas_subboxB (in borders within the panel-body). I had text-align: center in there but it doesn't seem to help center divs. div .text-center centers them but pushes them to the next line, which is what I'm trying to avoid on a big screen. I can't seem to get them on the same line and have them centered in their respective boxes. – CarbonandH20 Mar 23 '14 at 23:53
  • get rid of the float left on .col-md-6 and add margin-right: auto and margin-left: auto. – Ali Mar 24 '14 at 00:04
  • Like this? http://www.bootply.com/124124 I didn't see a float on those columns but I added the margins and it doesn't seem to work. – CarbonandH20 Mar 24 '14 at 00:18
  • My answer assumed you added the .text-center div after your .container. Check it out http://pastebin.com/wfMZznHC – Ali Mar 24 '14 at 00:32