Centrerar ej innehållet trots text-align: center

4 svar · 548 visningar · startad av Schmoo2 14 nov. 2007

Schmoo2Medlem sedan nov. 200721 inlägg

14 nov. 2007 13:01#1

Hej,

Varför centreras inte innehållet i div:arna task?

Här är den kod som genereras:

  <div id="content">
    <div class="feature">
      <p>
      <form name="math" method="post" action="">
         <div id="math">
            <div id="mathFirst">
               <input type="hidden" name="taskId" value="">
               <input name="tiokamrater" type="checkbox" onClick="setMaxValue(this)">Tiokamrater
            </div>
            <div id="mathSec">
               Maxv&auml;rde <input name="maxValue" type="text" id="maxValue" class="buttonText" value="10" size="4" maxlength="4">
               f&ouml;r
               <input name="maxValueTarget" id="summa" type="radio" value="radiobutton" checked>summa
               <input name="maxValueTarget" type="radio" value="radiobutton">termer
            </div>
            <div id="mathThird">
               <div class="task">Term<br><h3>
               1               </h3></div>
               <div class="task"><br><h3>+</h3></div>
 
               <div class="task">Term<br><h3>
               3               </h3></div>
               <div class="task"><br><h3>=</h3></div>
               <div class="task">Summa<br><h3>
               <input type="text" id="tal" size="4" maxlength="4">               </h3></div>
            </div>
         </div>
      </form>
</p>
    </div>

CSS:

#math { float:left; }
#mathFirst {    float:left;   padding:20px 10px 10px 10px;}
#mathSec { float:left;    padding:20px 10px 10px 10px; }
#mathThird { clear:left; float:left; padding:30px 0px 0px 0px; }
.task { float:left; padding:0px 10px 0px 10px; text-align:center; }
.feature{ padding: 0px 0px 10px 10px; font-size: 75%; min-height: 200px; height: 200px; }
#content{ padding: 0px 10px 0px 0px; margin:0px 0px 0px 178px;    border-left: 1px solid #ccd2d2; }

Jag har kollat med borders att texten verkligen ej är centrerad. Jag har ingen annan text-align.

Jag har testat att lägga in "text-align:center" i h3, #mathThird och .task men det funkar inte.

Det funkar när jag lägger in "text-align:center" i #math och .feature. Varför funkar det inte för de andra??? Vill inte ha centrerat för allt i divarna #math eller .feature.

Mycket tacksam för hjälp!

Danne VMedlem sedan aug. 20068 090 inlägg

14 nov. 2007 13:37#2

Har du testa i olika läsare?
Vad har du för Doctype?
Blir det bättre om du skriver så här:

.task { float:left; padding:0px 10px 0px 10px; text-align:center!important; }

headbugMedlem sedan sep. 2006867 inlägg

14 nov. 2007 14:43#3

Det beror på att du har floatat. En snabbfix är att ta bort float: left i #mathThird, så blir det fint.

Schmoo2Medlem sedan nov. 200721 inlägg

14 nov. 2007 15:52#4

Jag har

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

headbug: Det fungerade när jag tog bort float: left i #mathThird. Men kan du förklara varför?
Jag använder float för att placera div:arna på ett visst sätt. Om jag velat ha en div till höger om #mathThird så hade jag behövt float:left för den.

Danne V: text-align:center!important fungerar ej. Vad innebär !important?

Danne VMedlem sedan aug. 20068 090 inlägg

14 nov. 2007 17:23#5

Schmoo2 skrev:

Jag har
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
headbug: Det fungerade när jag tog bort float: left i #mathThird. Men kan du förklara varför?
Jag använder float för att placera div:arna på ett visst sätt. Om jag velat ha en div till höger om #mathThird så hade jag behövt float:left för den.

Danne V: text-align:center!important fungerar ej. Vad innebär !important?

Bra att det funkade. Fattar själv inte varför en float i den omslutande divven påverkade text-align, men det kan nog headbug förklara.

"!important" efter ett attribut gör att det bl.a. övertrumfar eventuellt ärvda attribut från andra element som egentligen skulle vara "starkare".