Geek Answers Handbook

Elements will not be centered within the div

I have three elements that are encoded similarly .infobtnlg, .twitter, .infobtnsm.

The first is .infobtnlgperfectly located within the div .section1, as I want, the second .twitterand third are .infobtnsmnot centered in their respective sections. Width set, margins left / right automatically. I added text-align: center;for good measure.

What am I missing?

DEMO PLAYGROUND

HTML

<div class="trisection">
    <div class="section1">
        <button type="button" class="infobtnlg">The May Difference</button>
        <button type="button" class="infobtnlg">Parent Reflections</button>
        <button type="button" class="infobtnlg">Make a Gift</button>
    </div>   

    <div class="section2">
        <div class="twitter">
            <img src="/images/twitter-bl.png" alt="twitter"/>Announcements
            <hr>
        </div> 
    </div>
    <div class="section3">
        <button type="button" class="infobtnsm" style="background-color: #003b76;">In the News</button>
        <button type="button" class="infobtnsm" style="background-color: #5a9331;">The May Way</button>
        <button type="button" class="infobtnsm" style="background-color: #ff0000;">Meet Our Teachers</button>
        <button type="button" class="infobtnsm" style="background-color: #ffcc00;">Friends of May</button>
        <button type="button" class="infobtnsm" style="background-color: #fb8d20;">The May Center</button>
    </div> 
</div>

CSS

.section1, .section2, .section3 {
    width: 90%;
    margin: 0px auto;
    height: 255px;
    text-align: center;
}

.infobtnlg, .twitter, .infobtnsm {
    display: block;
    width: 93%;
    margin: 6px auto;
    border-radius: 10px;
}

.infobtnlg {
    font-family: Garamond, Georgia, 'Times New Roman', serif;
    font-size: 1.5em;
    background-color: #5a9332;
    height: 77px;
    text-shadow: -1px -1px 1px #3c3c3c;
    box-shadow: -2px 2px 1px #3c3c3c;   
}

.twitter {
    height: 240px;
    background-color: #fff;
    background-image: url("/images/twfeed.png");
    background-size: contain;
    color: #5a9332;
    font-size: 18px;
    vertical-align: middle;
    font-weight: bold;
    border: solid 1px #e2dce0;

}

.infobtnsm{
    font-family: Scala, Myriadbold, sans-serif;
    font-size: 18px;
    text-align: center;
    height: 40px;
    margin-bottom: 5px;
}
+4
source share
2 answers

Add float: none;to .twitterand .infobtnsmor remove float: left;from

.vista .ie8 .infobtnlg, .twitter, .infobtnsm {
    float: left;
    width: 30%;
}
+8
source

text-align help you center the text inside these div

//to center contents inside div you shoul use:
#div {
    margin:auto;
}

bootstrap, ,

//html
<div class="container">
   <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 section1">
             //section1 contents
         </div>
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 twitter">
             //twitter contents
         </div>
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 infobtnsm">
             //infobtnsm contents
         </div>
      </div>
   </div>
</div>
0

More articles:


All Articles