Vấn đề canh giữa của 1 vùng div

[vnweb_services]

chuyện nhỏ như con thỏ, chấp mọi kích cỡ, mọi trình duyệt.

<div style="position:relative;overflow:hidden;background:#f00">
<div style="float:left;position:relative;left:50%">
<div style="position:relative;left:-50%;height:50px;background:#faa;width:300px"></div>
</div>
</div>

width với height các bác cứ đổi thoải mái nhá. mà khỏi cần để luôn cũng được, nội dung nó tự định vị.

Ai có vấn đề về html/css mà thấy vấn đề phức tạp cứ pm nick vnweb_services nhé, giá cả phải chăng, em thường hay nhận làm css cho nước ngoài, ceo vworker cũng đang nhờ em làm lại giùm trang vworker còn đây là trang mà em đã làm cho lão www . ian-ippolito . com

[ngoc_ann_00]

Css giải quyết vấn đề này .sử dụng thuộc tính này video ra center

demo

Chúc bạn thành công.

"display:table;margin: 0px auto;"
bạn này nói đúng nè,chỉ đơn giản vậy thôi

[Kang.Truong]

cái này đơn giản thôi, nếu trang của bạn có width là 500px thì bạn chỉ cần ghi:

<div style="width:500px; margin: 0 auto">
<p>canh div nằm giữa trình duyệt</p>
</div>

[php_code]

đây là code của mình, nó vẫn chưa canh giữa. mong mọi ng help với.

http://tinkerbin.com/FwgRFKcd

<style type="text/css">
.droplinetabs{
border: 1px solid red;
margin: 20px 0 0 0;
text-align: center;

overflow: hidden;
/*border-bottom: 1px solid gray;*/
float: left;
width: 980px;

}

.droplinetabs ul{
margin: auto;
width: auto;
/*width: auto;*/
border: 1px solid blue;
/*float: left;*/
/*padding-left: 130px;*/
font: bold 11px Verdana, sans-serif;

/*width: 100%;*/
list-style: none;
}

.droplinetabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
}


.droplinetabs li a{
height:30px;
line-height:25px;
float: left;
color: white;
background: #c76023 url(../img/leftedge.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 4px 0 0;
padding: 0 0 4px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.droplinetabs a:link, .droplinetabs a::visited, .droplinetabs a:active{
color: white;
}

.droplinetabs a span{
float: left;
display: block;
background: transparent url(../img/rightedge.gif) no-repeat right top; /*right corner image*/
padding: 3px 9px 3px 6px;
cursor: pointer;
}

.droplinetabs a span{
float: none;
}


.droplinetabs a:hover{
/*background color of tabs onMouseover */
/*background-color: #b05016;*/
color: white;
/*background-color: #1b1fbc;*/
background-color: #7878fc;

}

.droplinetabs a:hover span{
background-color: transparent;
}

/* Sub level menus*/
.droplinetabs ul li ul{
position: absolute; width: 852px !important;
z-index: 100;
left: 0;
top: 0;
/*background: #c76023; *//*sub menu background color */
border-radius: 5px;
background: #7878fc;
/*border: 2px solid #7878fc;*/
visibility: hidden;
}

/* Sub level menu links style */
.droplinetabs ul li ul li a{
font: normal 12px Verdana;
height: 20px !important;
padding: 6px; height: 20px;
padding-right: 8px;
margin: 0;
/*background: #c76023; *//*sub menu background color */
background: #7878fc;
}

.droplinetabs ul li ul li a span{
/*background: #c76023; *//*sub menu background color */
background: #7878fc;
}

.droplinetabs ul li ul li a:hover{ /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */
background: #714421;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
</style>
<div id="droplinetabs1" class="droplinetabs" align="center">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a>
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a>
</ul>
</li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Fashion</span></a>

</li>
<li><a href="#"><span>Fashion</span></a></li>

</ul>

</div>

[superthin]

@php_code: đề nghị cho một file .css và một file .html riêng hoàn chỉnh và valid với một DOCTYPE của W3C để được kiểm tra. Code của bạn trông rất ngổn ngang (code trên của bạn HTML không DOCTYPE có mở đầu, không biết đâu là head, đâu là body,... trông nó không cấu trúc ngô khoai gì cả cứ như bạn không hiểu gì về HTML) nên không ai rảnh rỗi ngồi để xem nó nhầm nhọt ở một chỗ nào đó để kiểm tra đâu. Nếu có thể bạn upload lên host cho nó chạy Live sẽ dễ kiểm tra hơn hoặc zip file .html và .css thành 1 file upload lên một trang chia sẻ và cho link vào đây để mọi người lấy về sửa giúp.

Tốt nhất trong file HTML bạn có ghi chú là bạn cần canh cái nào, mong đợi nó ra làm sao nhưng kết quả nó đang như thế nào để người ta còn biết. Hơn nữa bạn phải "nhồi" vào trong DIV nội dung nào đó mới thấy được chứ DIV rỗng hoặc chỉ có số ký tự quá hạn chế có khi cũng là nguyên nhân.

[tatuan142]

chuyện nhỏ như con thỏ, chấp mọi kích cỡ, mọi trình duyệt.

<div style="position:relative;overflow:hidden;background:#f00">
<div style="float:left;position:relative;left:50%">
<div style="position:relative;left:-50%;height:50px;background:#faa;width:300px"></div>
</div>
</div>

width với height các bác cứ đổi thoải mái nhá. mà khỏi cần để luôn cũng được, nội dung nó tự định vị.

Ai có vấn đề về html/css mà thấy vấn đề phức tạp cứ pm nick vnweb_services nhé, giá cả phải chăng, em thường hay nhận làm css cho nước ngoài, ceo vworker cũng đang nhờ em làm lại giùm trang vworker còn đây là trang mà em đã làm cho lão www . ian-ippolito . com

Mình thấy div trong cùng của bạn có width , mà yêu cầu của chủ topic là lúc nào cũng phải căn giữa ko phụ thuộc vào width height của phần content


Bạn chủ topic thử cách này xem :

tinkerbin . com / EBO9QQog

[vnweb_services]

Mình thấy div trong cùng của bạn có width , mà yêu cầu của chủ topic là lúc nào cũng phải căn giữa ko phụ thuộc vào width height của phần content


Bạn chủ topic thử cách này xem :

tinkerbin . com / EBO9QQog

bác có đọc thấy câu

width với height các bác cứ đổi thoải mái nhá. mà khỏi cần để luôn cũng được, nội dung nó tự định vị.

mình làm ví dụ với cái div trống rỗng thì chả lẽ để width:auto với float là left -> width = 0 rồi sao coi bởi vậy sau này đưa hướng dẫn khỏi triển khai code cho đỡ mắc công.

[tatuan142]

mình làm ví dụ với cái div trống rỗng thì chả lẽ để width:auto với float là left -> width = 0 rồi sao coi bởi vậy sau này đưa hướng dẫn khỏi triển khai code cho đỡ mắc công.

Theo bài viết của bạn thì div trong cùng là content cần thể hiện.
Mình vừa thay đổi width , height của div ngoài cùng , và thấy code của bạn có căn giữa chiều ngang , nhưng không căn giữa chiều dọc .

Về cơ bản thì các viết code của mình và bạn giống nhau , nên chỉ cần fix 1 chút là xong

[vnweb_services]

Theo bài viết của bạn thì div trong cùng là content cần thể hiện.
Mình vừa thay đổi width , height của div ngoài cùng , và thấy code của bạn có căn giữa chiều ngang , nhưng không căn giữa chiều dọc .

Về cơ bản thì các viết code của mình và bạn giống nhau , nên chỉ cần fix 1 chút là xong

chủ thớt hỏi sao làm vậy thôi, thêm code canh dọc nữa chi cho rối, mà của bạn đâu có giống mình nhỉ, mình ko cần hack mà của mình vẫn chạy ie7, còn của bạn mình mở ie7 thấy nó đâu có nằm giữa.

Còn muốn test code này without width n height thì đây:

<div style="position:relative; overflow:hidden; background:#f00">
<div style="float:left;position:relative;left:50%">
<div style="position:relative;left:-50%;background:#faa;padding:50px 0">
Test Test Test Test Test
</div>
</div>
</div>

[tatuan142]

Phù , có thuộc tính table , 50%, -50% va cách sắp xếp html thì mình bảo giống nhau, còn mình k test mấy bạn ie vì hầu như nếu đã thoát khỏi cái bóng ie 6 ng ta nâng cấp lên ie 9 luôn, ie 7 là mặc định của vista, thị phần bạn này rất nhỏ . Mình nghĩ chủ thớt hỏi luôn cho vc căn dọc, content của chủ thớt là player...

anyway , ra đc kết quả rùi , nhưng mình cha bao h dùng , w mình , dùng table trong trường hợp này nhanh nhất, trừ khi khách hàng có y/c webside full DIV