1

I'm throwing the kitchen sink at this one, but I'm not seeing how to center it.

I would guess that class="navbar-form navbar-left" has something to do with it but removing it or changing it to navbar-right does nothing.

HTML:

<div class="clearfix" id="problemcontainer">
<form class="myform" method="GET" action="servlet" class="navbar-form navbar-left">
    <div class="clearfix">
    <div id="dateFieldandCalendar">
        <div class="input-group date">
            <input id="datepicker" name="pickedDate" type="text" class="form-control" placeholder="mm/dd/yyyy"/>
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="datebtn">
                    <i class="glyphicon glyphicon-calendar"></i>
                </button>
            </span>
        </div>
    </div>
    </div>
    <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Calculate Dates!</button> 
    <button type="reset" class="btn btn-warning"><i class="glyphicon glyphicon-remove"></i> Reset</button>
    <input id="month" name="monthHTML" value="" type="hidden"/>
    <input id="day" name="dayHTML" value="" type="hidden"/>
    <input id="year" name="yearHTML" value="" type="hidden"/>
    <input id="formID" name="formIDHTML" value="CaStateMSJID" type="hidden"/>
</form>
</div>

CSS:

.problemcontainer {
    text-align: center;
    overflow: collapse;
}

.myform {
    margin-top: 10px;
    text-align: center;
    overflow: collapse;
}

.input-group.date {
    text-align: center;
    width: 150px;
    overflow: collapse;
}

.dateFieldandCalendar {
    overflow: collapse;

    text-align: center; 
}

.input-group-btn {
    text-align: center;
}

.form-control {
    text-align: center;
}

.input-group {
    text-align: center;
}

.datepicker {
    text-align: center;
}

http://jsfiddle.net/H8LNA/

CarbonandH20
  • 361
  • 1
  • 3
  • 13

1 Answers1

1

Given that you are setting a width on the element, simply use margin:0 auto to center it.

UPDATED EXAMPLE HERE

.input-group.date {
    margin:0 auto;
    width: 150px;
}

The reason text-align:center wasn't working, was because that property isn't respected by pure block level elements, in this case the div.

For an alternative approach, you could make the element inline-block and add text-align:center to the parent element. Bootstrap has a class for this, just add text-center to the element's class list.

Related: Center div on Bootstrap 3

Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304