can't get content to center.

Discussion in 'Programming' started by tyankee, Mar 31, 2014.

  1. #1
    never had a problem like this.. inherited the messy CSS but i can't get the main content to center.. i've tried everything i know.. i know i'm missing something stupid..

    http://demo.engajdloyalty.com/yii.php/site/login

    trying to get this to center:
    <div style="margin: 0 auto; width:1170px;">
    <img class="LogoSm" alt="ENgajd" src="/css/images/ENgajd.png" style="width: 256px; margin: 0 auto 0 auto;">
    </div>

    and the next div:

    <div class="form" style="margin: 0 auto; width:1170px;">
     
    tyankee, Mar 31, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Images are either 'inline-block' or a 'special' display type (depending on browser). As such they don't accept auto-margin for centering. Add display:block to the IMG and it will work. The other option is to set text-align:center on it's parent, but with all those extra "DIV for nothing" in there that's probably not gonna fly.

    Though you're right, that's some messy pointless CSS; and the markup is no winner either. All that inlined style, DIV for nothing, and host of other garbage means it probably should be tossed and started over from scratch.

    Particularly with that bloated bootstrap crap and html5 shiv in a XHTML tranny doctype; that's outright gibberish. Oh wow, it's trying to use blueprint AND bootstrap AT THE SAME TIME?!? What utter and complete rubbish! Do yourself a HUGE favor and throw all of that in the trash.

    I mean this:
        <body class="summary">
            <div class="container">
                <div class="row">
                    <div class="header col-md-12">
                        <div class="row">
                            <div class="col-md-2 col-sm-2 col-xs-5 logo"> <img src="/css/images/ENgajd.png" alt="ENgajd" class="LogoSm"/> </div>
                            <div class="col-md-10 col-sm-10 col-xs-7 header-text-area"> <span class="header-text"> Promotion Summary </span> </div>
                        </div>
                    </div>
                </div>
            </div>
    Code (markup):
    Is laughably bad with the endless pointless DIV for nothing, endless pointless classes for nothing, and a IMG that appears to be presentation and has no business in the markup.... for what should probably be:

    </head><body>
    
    <div id="top" class="widthWrapper">
    	<h1>
    		<span><span>EN</span>gajd<b><!-- image replacement --></b></span>
    		Promotion Summary
    	</h1>
    Code (markup):
    Also wondering why it's bothering with that second space-wasting image... Anywhere from a third to half of that code belongs on the cutting room floor... but it sounds like you already know that.
     
    Last edited: Mar 31, 2014
    deathshadow, Mar 31, 2014 IP