cố gắng căn chỉnh nút html ở giữa trang của tôi

Question

Tôi đang cố gắng căn chỉnh nút HTML chính xác ở giữa trang bất kể trình duyệt được sử dụng. Nó hoặc là nổi sang trái trong khi vẫn đang ở trung tâm dọc hoặc đang ở đâu đó trên trang như ở đầu trang vv .. Tôi muốn nó được cả hai chiều dọc và chiều ngang được làm trung tâm. Dưới đây là những gì tôi đã viết ngay bây giờ:

<button type="button" 
style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> 
mybuttonname</button> 

Answer 1

Đây là giải pháp của bạn: http://jsfiddle.net/7Laf8/

Về cơ bản, đặt nút của bạn thành một div với văn bản làm trung tâm:

<div class="wrapper"> 
    <button class="button">Button</button> 
</div> 

Với phong cách sau:

.wrapper { 
    text-align: center; 
} 

.button { 
    position: absolute; 
    top: 50%; 
} 

Có nhiều cách để làm da mèo và điều này chỉ diễn ra e.

Answer 2

Nơi nó bên trong div khác, sử dụng CSS để di chuyển các nút để giữa:

<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;"> 
    <button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> 
mybuttonname</button> 
</div>​ 

Dưới đây là một ví dụ: http://jsfiddle.net/U2B3x/

Answer 3

thử này nó là khá đơn giản và cung cấp cho bạn không thể thay đổi tập tin .css của bạn này nên làm việc

<p align="center"> 
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button> 
</p> 

Answer 4

tôi đã thực sự lấy thời gian gần đây để display: table để cung cấp cho mọi thứ một kích thước cố định chẳng hạn như cho phép margin: 0 auto để làm việc. Đã làm cho cuộc sống của tôi dễ dàng hơn nhiều. Bạn chỉ cần vượt qua thực tế là hiển thị 'bảng' không có nghĩa là bảng html.

Tính năng này đặc biệt hữu ích cho thiết kế đáp ứng, nơi mọi thứ chỉ có lông và điên 50% còn lại và -50% trở nên không thể quản lý được.

style 
{ 
    display: table; 
    margin: 0 auto 
} 

http://jsfiddle.net/Z52eR/

Bên cạnh đó nếu bạn đã có hai nút và bạn muốn họ cùng chiều rộng bạn thậm chí không cần phải biết kích thước của mỗi để có được chúng là cùng một chiều rộng - vì bàn sẽ thu nhỏ chúng một cách kỳ diệu cho bạn.

http://jsfiddle.net/AK674/2/

(điều này cũng làm việc nếu họ đang inline và bạn muốn tập trung hai nút bên này sang bên kia - hãy thử làm điều đó với tỷ lệ phần trăm!).

Answer 5

Bạn có thể tập trung một nút mà không sử dụng text-align trên phụ huynh div bởi đơn giản sử dụng margin:auto; display:block;

Ví dụ:

HTML

<div> 
    <button>Submit</button> 
</div> 

CSS

button{ 
    margin:auto; 
    display:block; 
} 

thấy hoạt động:http://codepen.io/maudulus/pen/avBdpL

Answer 6

Dưới đây là giải pháp như hỏi

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>

Answer 7

Đối với tôi nó làm việc sử dụng flexbox.

Thêm một lớp css quanh mẹ div/phần tử với:

.parent { 
    display: flex; 
} 

và cho việc sử dụng nút:

.button { 
    justify-content: center; 
} 

Bạn nên sử dụng một div cha mẹ, nếu không nút không ' biết 'phần giữa của trang/phần tử là gì.