A-AA+then

css div align center

2,090
css
มีปัญหานืดหนึ่งครับว่าทำ div ให้อยู่กลางจอไม่ได้ครับ มันได้แต่ FF แต่ใน IE ไม่กลางจอครับ

อันนี้ css
#form_manage #head{
clear:both;
background: #455e7f;
width:100%;
color:#ffffff;
padding-top:5px;
padding-bottom:5px;
font-weight:bold;
font-size:14px;
text-align:center;
}
#form_manage div.line{
clear:both;
width:100%;
margin-top:4px;
}
div#form_manage {
    WIDTH: 700px;
    margin-left: auto ;
      margin-right: auto ;
      BACKGROUND: #fff;
    PADDING-BOTTOM: 1em;
    border:solid 3px #455e7f;

}
#form_manage label {
    FLOAT: left; WIDTH: 20em; MARGIN-RIGHT: 1em; TEXT-ALIGN: right;color:#455e7f;padding-top:8px;font-weight:bold;;
}
#form_manage .btnCalendar{        
         border:0;
         background-color:white;
         width: 20px;
        background:url(images/calendar.gif);    
         background-position:center;
         background-repeat:no-repeat;
         
    }
#form_manage .inp,.box {
    BORDER-RIGHT: #ddd 1px solid;
    PADDING-RIGHT: 0.15em;
    BORDER-TOP: #ddd 1px solid;
    PADDING-LEFT: 0.15em;
    BACKGROUND: #fafafa;
    PADDING-BOTTOM: 0.15em;
    BORDER-LEFT: #ddd 1px solid;
    PADDING-TOP: 0.15em;
    BORDER-BOTTOM: #ddd 1px solid; -moz-border-radius: 0.4em; -khtml-border-radius: 0.4em;
    font-size: 14px;    
}
#form_manage .inp:hover {
    BORDER-LEFT-COLOR: #c5c5c5; BACKGROUND: #f6f6f6; BORDER-BOTTOM-COLOR: #c5c5c5; BORDER-TOP-COLOR: #c5c5c5; BORDER-RIGHT-COLOR: #c5c5c5
}
#form_manage .inp:focus {
    BORDER-LEFT-COLOR: #c5c5c5; BACKGROUND: #f6f6f6; BORDER-BOTTOM-COLOR: #c5c5c5; BORDER-TOP-COLOR: #c5c5c5; BORDER-RIGHT-COLOR: #c5c5c5
}
#form_manage .radio {
    POSITION: relative
}
#form_manage .require{
        color:red;
        font-size:12px;
        font-weight:normal;
        width:2px;
        padding-left:1px;
        }
#submit-go,.submit-go {
    MARGIN-TOP: 1em;
    BACKGROUND: #455e7f;
    color:#ffffff;
font-weight:bold;
font-size:12px;
text-align:center;
padding:2px;
margin-right:2px;
}
#form_manage #block{
text-align:center;
}


อันนี้ ฟอร์มครับ

<div class="clear"></div>
<div id="form_manage">
<div class="head"></div>

<div class="line">
<label ></label>
<input type="text" name="name" id="name" class="box" required="required">

<span  class="require" id="_name">*</span><input type="hidden" name="type" id="type" class="box" value="jpg,gif,png">
</div>
<div id="block">
<button  type="submit" class='submit-go'>Save</button>
<button  type="reset" class='submit-go'>Clear</button>
    </div>
    <div class="spacer"></div>
    </div>

6 ความคิดเห็น

อะไรครับที่ center ชิ้นส่วนไหน

ถ้าใช้  text-align: center ชิ้นนั้นก็ควรกำหนด display: block ด้วย

ถ้าต้องการให้ div อยู่กลางจอ ก็ margin: 0 auto; รวมถึงกำหนด width ด้วยครับ

CSS มีหลายส่วนที่สัมพันธ์กันครับ ไม่ใช่เรื่องเฉพาะตัวของชิ้นส่วนใดๆเพียงชิ้นเดียว ดังนั้น การกำหนดของแต่ละชิ้น ต้องสัมพันธ์กันครับ
1

ให้ div อยู่กลางจอครับ ในนี้ผมใช้ #form_manage เป็น div ที่ีครอบฟอร์มไว้ครับ
ใน div ผมกำหนดให้
WIDTH: 700px;
    margin-left: auto ;
      margin-right: auto

ครับ ใน FF div ไปอยู่กลางจอ แต่ใน IE ไม่กลางครับ
2

code css 
.wrap{
margin:0 auto; /* 0 ตัวแรก = บน ล่าง ,  auto = ซ้าย ขวา */
width:220px;

code html
<div class="wrap">
My Page
</div>
3

ดูบทความครับ เขียนให้แล้ว
4

เหอๆ จะหาว่าโง่ก้ได้น่ะครับ งงจิงๆขนาดผมทำเหลือแค่นี้ IE มานยังไม่กลางจอเรยครับ =='

<style type="text/css">
.a {
border:1px solid green;
display: table;
margin: 0 auto;
width: 200px;

}
.b{
border:1px solid red;
display: block;
}
</style>
<div class="b"><div class="a">dd</div></div>

5

555+++

ในบทความเราจะพูดถึงการแสดงผลตามมาตรฐานครับ ซึ่งถ้า Browser ไม่เป็นไปตามมาตรฐาน หรือ โค้ดที่เขียน ไม่ได้ทเป็นไปตามมาตรฐาน มันย่อมแสดงผล ผิดไปจากที่ควรจะเป็น

ถ้าจะสังเกตุ บทความนั้นอยู่ในหมวด XHTML

การนำไปใช้ ก็ควรใช้เป็น XHTML ตามข้อกำหนดของเว็บสมัยใหม่ ซึ่งมีหลายระดับ และ แต่ละแบบ แสดงผลไม่เหมือนกัน ครับ

คำถาม ? แล้วจะรู้ได้ไงว่าจะใช้อันไหน และ ต้องทำอย่างไร

คำตอบสั้นๆ คือ meta ไงครับ

http://www.goragod.com/knowledge-10%20%E0%B8%AB%E0%B8%99%E0%B8%97%E0%B8%B2%E0%B8%87%E0%B9%83%E0%B8%99%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B8%AA%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B2%E0%B8%95%E0%B8%A3%E0%B8%90%E0%B8%B2%E0%B8%99%20%28%E0%B8%95%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88%201%29.html
6
^