css div align center
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">ADD_ITEM</div>
<div class="line">
<label >ITEM</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="{TYPE}">
</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>
มีปัญหานืดหนึ่งครับว่าทำ 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">ADD_ITEM</div>
<div class="line">
<label >ITEM</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="{TYPE}">
</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>
ถ้าใช้ text-align: center ชิ้นนั้นก็ควรกำหนด display: block ด้วย
ถ้าต้องการให้ div อยู่กลางจอ ก็ margin: 0 auto; รวมถึงกำหนด width ด้วยครับ
CSS มีหลายส่วนที่สัมพันธ์กันครับ ไม่ใช่เรื่องเฉพาะตัวของชิ้นส่วนใดๆเพียงชิ้นเดียว ดังนั้น การกำหนดของแต่ละชิ้น ต้องสัมพันธ์กันครับ
ใน div ผมกำหนดให้
WIDTH: 700px;
margin-left: auto ;
margin-right: auto
ครับ ใน FF div ไปอยู่กลางจอ แต่ใน IE ไม่กลางครับ
.wrap{
width:220px;
code html
<div class="wrap">
My Page
</div>
เหอๆ จะหาว่าโง่ก้ได้น่ะครับ งงจิงๆขนาดผมทำเหลือแค่นี้ 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>
ในบทความเราจะพูดถึงการแสดงผลตามมาตรฐานครับ ซึ่งถ้า Browser ไม่เป็นไปตามมาตรฐาน หรือ โค้ดที่เขียน ไม่ได้ทเป็นไปตามมาตรฐาน มันย่อมแสดงผล ผิดไปจากที่ควรจะเป็น
ถ้าจะสังเกตุ บทความนั้นอยู่ในหมวด XHTML
การนำไปใช้ ก็ควรใช้เป็น XHTML ตามข้อกำหนดของเว็บสมัยใหม่ ซึ่งมีหลายระดับ และ แต่ละแบบ แสดงผลไม่เหมือนกัน ครับ
คำถาม ? แล้วจะรู้ได้ไงว่าจะใช้อันไหน และ ต้องทำอย่างไร
คำตอบสั้นๆ คือ meta ไงครับ
http://www.goragod.com/...E0%B9%88%201%29.html