Làm thế nào để làm cho văn bản theo chiều dọc và chiều ngang trung tâm trong một trang HTML

Tôi có một số kinh nghiệm với Java, C, cơ sở dữ liệu, mạng vv .. Nhưng bất cứ điều gì liên quan với Html tôi là một kẻ ăn xin. Điều duy nhất mà tôi đang tìm kiếm là trung tâm hai từ ở giữa trang (Trang này sẽ chỉ có hai từ đó).Làm thế nào để làm cho văn bản theo chiều dọc và chiều ngang trung tâm trong một trang HTML

       WORD1 
          WORDWORDWORDWORD2

Tôi đã thử một số phần mềm WYSIWYG như KompoZer, nhưng khi tôi nhìn vào mã nguồn, nó đã tạo ra một mã tĩnh khủng khiếp với rất nhiều <br> để đạt được các trung tâm theo chiều dọc của page.Anybody có thể giúp tôi việc tìm kiếm một giải pháp tốt cho vấn đề này

Nguồn

2012-03-22 tt0686

Bạn cũng cần nó để được căn giữa theo chiều dọc? –

xác định "ở giữa trang". Trung tâm lên xuống (verticle)? Căn giữa trái và phải (ngang)? – DwB

Có Simon, tôi hoàn toàn cảm ơn bởi tất cả các câu trả lời nhanh chóng nhưng vấn đề là tất cả chúng chỉ giải quyết các trung tâm nằm ngang.Điều tôi cần là cả hai vị trí (ngang và dọc) .Both từ phải ở giữa trang – tt0686

Định tâm theo chiều ngang rất dễ dàng - trung theo chiều dọc là một chút khó khăn trong css vì nó không thực sự được hỗ trợ (bên cạnh các ô bảng <td>, đó là phong cách xấu để bố trí trừ khi một bảng thực sự cần thiết như - cũng - một bảng). Nhưng bạn có thể sử dụng các thẻ html đúng ngữ nghĩa và áp dụng các thuộc tính hiển thị bảng cho nó.

Đó là một giải pháp khả thi - có nhiều cách tiếp cận, here is a good article on that.

Trong trường hợp một cái gì đó của bạn như thế nên là đủ:

<!DOCTYPE html> 
<html lang="de"> 
    <head> 
     <title>Hello World</title> 
     <style> 

     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      width: 100%; 
     } 

     body { 
      display: table; 
     } 

     .my-block { 
      text-align: center; 
      display: table-cell; 
      vertical-align: middle; 
     } 
     </style> 
    </head> 
    <body> 
    <div class="my-block"> 
     WORD1<br /> 
     WORDWORDWORDWORD2 
    </div> 
    </body> 
</html>

Nguồn

2012-03-22 15:58:57 acme

Cảm ơn! Giải pháp hoàn hảo và cảm ơn cho liên kết cũng là – tt0686

Bạn được chào đón - (người thuần túy html sẽ trực tiếp sử dụng ' 'làm vùng chứa văn bản thay vì một div bổ sung). – acme

Just do it như

<div style="text-align:center;"> 
    WORD1<br /> 
    WORDWORDWORDWORD2 
</div>

Nguồn

2012-03-22 15:49:58 irfanmcsd

Đối với người mới bắt đầu, điều này là tốt, nhưng nói chung, HTML phải là ngữ nghĩa nhất có thể, và trong phong cách dòng vi phạm hiệu trưởng cũng như tách mối quan tâm. –

-1

để tập trung văn bản mà bạn có thể sử dụng các thẻ HTML <center>:

<center>Blah</center>

hoặc bạn có thể sử dụng CSS:

<style> 
    .centered_text { 
    text-align:middle; 
    } 
</style> 

<a class='centered_text'>Blah</a>

Nguồn

2012-03-22 15:50:35 Adjam

' không được dùng nữa và không nên sử dụng. '' là, theo mặc định, 'display: inline' để thuộc tính' text-align' không áp dụng cho nó. – Quentin

'Trung tâm' không được chấp nhận. HTML xử lý dữ liệu, CSS là để hiển thị. –

Cảm ơn thông tin @Quentin và @Chris Sobolewski. Không có ý tưởng bạn không nên sử dụng '

'. Và bây giờ tôi nghĩ về nó, bạn nói đúng về việc sử dụng thẻ '' để căn chỉnh văn bản. Tôi sẽ để lại câu trả lời ở đây để những người khác có thể đọc các bình luận và xem tôi đã đi sai ở đâu. – Adjam

Cách tốt nhất là đặt nó trong một số yếu tố như div. bên trong div bạn có thể dễ dàng căn giữa văn bản với text-align: center; (giả sử rằng bạn đặt một số chiều rộng cho div đó). Sau đó, bạn có thể tập trung mà div trên trang bằng cách thêm phong cách lề tự động (margin: 0px auto;)

w3 manual about centering ;-)

Nguồn

2012-03-22 15:51:09 Gatekeeper

Các "thực hành tốt nhất" cách để làm điều đó sẽ là:

Vì bạn nói rằng bạn là người mới, Tôi đang hiển thị toàn bộ cấu trúc tài liệu cho bạn. Kiểu phải nằm trong thẻ đầu để thẻ được tải trước và bạn nên avoid inline style as much as possible.

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    .center{ 
     text-align:center; 
    } 
    </style> 
    </head> 
    <body> 
     <div class="center"> 
      <p>WORD1</p> 
      <p>WORDWORDWORDWORD2</p> 
     </div> 
    </body> 
</html>

Nguồn

2012-03-22 15:51:28

Bạn có thể đặt các văn bản bên trong một <div> và sắp xếp các văn bản sử dụng CSS:

<div style="text-align:center;"> 
    WORD1<br /> 
    WORDWORDWORDWORD2 
</div>

các <div> là một yếu tố khối có nghĩa là nó sẽ được kéo dài đến 100% chiều rộng và văn bản sẽ được ở ở trung tâm của trang

jsFiddle dụ

Nguồn

2012-03-22 15:52:03 Teneff

Như đã đề cập trên một câu trả lời khác, đối với người mới bắt đầu, điều này là tốt, nhưng nói chung HTML phải là ngữ nghĩa nhất có thể, và trong phong cách dòng vi phạm hiệu trưởng cũng như tách mối quan tâm. –

Không làm việc cho IE6 nhưng vẫn.

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 
}

Nguồn

2016-01-07 14:30:34

Làm thế nào để làm cho văn bản theo chiều dọc và chiều ngang trung tâm trong một trang HTML

Trả lời

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