cần trợ giúp CSS định tâm với vị trí tuyệt đối

Tôi chưa bao giờ hoàn toàn hài lòng với các giải pháp khác nhau của mình để căn giữa nội dung trong trang web. thẻ <center> đã không còn được dùng nữa vào giữa thế kỷ 18, nhưng tôi không thấy sự thay thế hợp lý. Cụ thể những gì tôi muốn là có một DIV cha là trung tâm, nhưng đối với góc trên bên trái của tôi, tôi có thể thiết lập mọi thứ "hoàn toàn".cần trợ giúp CSS định tâm với vị trí tuyệt đối

Có cách nào để thực hiện điều này mà không cần sử dụng window.onresize javascript có thể khôi phục mọi thứ không? Nó có vẻ như một ý tưởng khá thẳng về phía trước ... Tôi muốn mọi thứ được định vị hoàn toàn, tôi chỉ muốn tọa độ 0,0 là tương đối so với một cái gì đó khác với góc trên cùng bên trái của cửa sổ trình duyệt. Ngay bây giờ, những gì tôi làm là thiết lập div để căn giữa nội dung của nó và sau đó là mì với vị trí tương đối, nhưng điều đó rất mệt mỏi vì các đối tượng tương đối tiếp tục đẩy nhau theo những cách mà tôi hoàn toàn không muốn.

Bất kỳ và tất cả suy nghĩ về điều này được đánh giá cao.

Nguồn

2009-06-23 Genia S.

Đây có phải là những gì bạn đang tìm kiếm không?

<div style=" position: absolute; 
      display: inline-block; 
      top: 20%; 
      bottom: 20%; 
      right: 20%; 
      left: 20%; 
      background-color: #434154; 
      text-align: center;"> 
    <div style="display: inline-block; 
       height: 100%; 
       vertical-align: middle;"></div> 
    <div style="position: relative; 
       color: #FFFFFF; 
       background-color: #546354; 
       display: inline-block; 
       vertical-align: middle;"> 
       THIS IS CENTERED WITHOUT SCRIPTING :D 
    </div> 
</div>

Nguồn

2013-06-22 09:51:33 chinanzio

yep, cảm ơn. Tôi thực sự thích câu trả lời này mà tôi đã chọn. –

Bạn không muốn định vị tương đối nếu 0,0 sẽ liên quan đến div?

Nguồn

2009-06-23 18:57:12 Tony

không, tôi muốn những điều TRÊN div rằng để có vị trí chính xác, nhưng nếu bạn bắt đầu thiết lập điều cần "tuyệt đối", họ xếp hàng lên chống lại phía trên bên trái của trình duyệt chứ không phải là div cha mẹ . –

Cách hay nhất để căn giữa là sử dụng thẻ css "margin: auto". Điều này hoạt động trong FF và Safari. Chỉ cần cung cấp cho một số div chiều rộng và một auto margin, và nếu cha mẹ là 100% chiều rộng, sau đó div này sẽ trung tâm align chính nó.

Để làm việc này trong IE, bạn phải sử dụng thuộc tính căn chỉnh văn bản: căn giữa trên gốc và sau đó căn chỉnh văn bản trái trên div trung tâm thực tế.

AFAIK, không có cách nào để thay đổi tọa độ tuyệt đối từ 0,0 đến điểm trọng tài khác. Tương đối là con đường để đi.

Nguồn

2009-06-23 18:58:44 Shreyas

bạn sử dụng các thuộc tính CSS trái, phải, trên cùng và dưới cùng để định vị một phần tử có vị trí tương đối hoặc tuyệt đối ví dụ. trên cùng: 10px; di chuyển phần tử cách xa 10 pixel. – roborourke

body { text-align: center; } 
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; } 
#wrapper .child { position: absolute; left: 0; top: 0; }

Chỉ cần ví dụ mã, nhưng bất kỳ yếu tố .child sẽ ở 0,0 của wrapper

Bất kỳ yếu tố hoàn toàn vị trí sẽ hoàn toàn vị trí để nó mẹ vị trí-họ hàng gần nhất. Nếu một phần tử không có một phụ huynh có vị trí tương đối, nó chỉ sử dụng tài liệu. Dưới đây là một ví dụ không có các lớp (một số kiểu màu và chiều rộng được thêm vào để rõ ràng).

<html> 
    <body style="text-align: center;"> 
     <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;"> 
      <div style="position: absolute; left: 0; top: 0;"> 
       This will absolutely position relative to the container div. 
      </div> 
     </div> 
     <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;"> 
      This will absolutely position relative to the document 
     </div> 
    </body> 
</html>

Nguồn

2009-06-23 18:59:35

hoàn toàn hoạt động và chính xác là những gì tôi đang tìm kiếm. Tôi đang trên một mac, atm, và thử nghiệm trong FF và Safari. Điều này làm việc giống nhau trong IE (Tôi không quan tâm đến IE6, chỉ là các phiên bản mới hơn). –

vừa được thử nghiệm trong IE ... hoạt động như một nét duyên dáng. Vì vậy, chìa khóa cho toàn bộ doanh nghiệp là có các lớp được định nghĩa là thuộc về kiểu id tức là: # id.classname Rất thú vị. –

Trên thực tế không - xem bản cập nhật để giải thích thêm –

có lẽ tôi đã không hiểu được nhiệm vụ nhưng tôi nghĩ bạn có thể sử dụng

margin: 0 auto;

căn giữa đối tượng divs bạn

Nguồn

2009-06-23 18:59:35 Roman

Sử dụng định vị tương đối về cha mẹ và cho rằng yếu tố cùng một tài sản:

margin: 0 auto;

Cha mẹ hiện được định vị và bạn sẽ có thể đặt các thành phần abso trong đó.

Ví dụ:

div#page{ 
    position:relative; 
    width:400px; 
    margin:0 auto; 
} 

div#page #absoluteExample{ 
    position:absolute; 
    top:18px; 
    left:100px; 
}

Nguồn

2009-06-23 19:11:31 moorej

Nếu bạn đang gắn bó với position: absolute; sau đó đặt div mà bạn muốn điều vị trí chống lại có position: relative; để làm cho nó vào bối cảnh vị trí cho bất kỳ phần tử con.

Để tập trung một div hoàn toàn vị trí bạn cần phải biết chiều rộng của nó, sau đó sử dụng CSS sau:

#wrapper { 
    width: 800px; 
    margin: 0 auto; 
    position: relative; /* creates a positioning context for child elements */ 
} 

#child { 
    position: absolute; 
    width: 400px; 
    left: 50%; 
    margin-left: -200px; 
}

Và HTML:

<div id="wrapper"> 
    <div id="child"> 
     .... 
    </div> 
</div>

Bạn có thể tinh chỉnh độ rộng và lề trái như bạn cần nó (lề trái âm phải bằng một nửa chiều rộng của div bạn đang định tâm, ví dụ: #child.

Như những người khác đã đề cập sử dụng margin: 0 auto; trên một phần tử có chiều rộng được đặt trên nó sẽ căn giữa nó.

Nguồn

2009-06-23 19:12:53 roborourke

Thuộc tính text-align: center; làm những gì <center> được sử dụng và nó vượt trội hơn rất nhiều so với nó.

Điều duy nhất là nó phức tạp hơn một chút để sử dụng. Một khi bạn nhận được hang của nó, bạn sẽ tự hỏi tại sao bạn đã gặp rất nhiều rắc rối trước khi!

Bạn phải sử dụng nó phối hợp với các thuộc tính của các yếu tố khác trên trang. Đó là vấn đề mà các nhà phát triển/nhà thiết kế có với CSS và các công nghệ HTML mới hơn. Nó cho chúng ta một cách mạnh mẽ để trình bày các yếu tố trang của chúng ta nhưng làm cho nó phức tạp hơn và nghiêm ngặt hơn nhiều.

Câu trả lời của Mike Robinson chắc chắn giải quyết được vấn đề bạn đang gặp phải ở đây và đây là một ví dụ tuyệt vời. Nhưng ...

Tôi không nghĩ rằng bất kỳ câu trả lời nào sẽ chỉ cho bạn cách sử dụng text-align đúng cho tất cả các trường hợp bạn sẽ gặp phải, nhưng hãy thử xem cách định vị trong CSS hoạt động sâu hơn.

Nguồn

2009-06-23 19:53:45 Travis

Cách đơn giản nhất:

#element { 

position: absolute; /*Absolute Position*/ 

top: 0; 
left: 0;   /*Set the 4 coordinates to zero*/ 
bottom: 0; 
right: 0; 

margin: auto;  /*Margin to Auto*/ 

height: 150px; /*Set the Height and Width*/ 
width:150px; 

background:green; /* Backgroung:optional*/

}

Điều này sẽ mang lại cho nó ngay ở giữa, bất kể đó là kích thước.

Hy vọng điều đó sẽ hữu ích!

Xem Fiddle: http://jsfiddle.net/kfPC6/

Nguồn

2013-10-16 15:09:34 ErickBest

cần trợ giúp CSS định tâm với vị trí tuyệt đối

Trả lời

Các vấn đề liên quan