Cách căn giữa hai divs trôi nổi cạnh nhau

Tôi đã viết HTML sau đây cố gắng căn giữa hai div nằm cạnh nhau.Cách căn giữa hai divs trôi nổi cạnh nhau

<div id='wrapper' style='text-align:center;'> 
    <div style='float:left;'> 
     Lorem ipsum<br /> 
     dolor sit amet 
    </div> 
    <div style='float:left;'> 
    Lorem ipsum<br /> 
    dolor sit amet 
    </div> 
</div>

Tuy nhiên, mã tôi đã viết kết quả trong hai div đang trôi nổi ở bên trái. Điều này làm đúng cách là nổi hai bên của div bên cạnh.

Tôi cần thay đổi gì để căn giữa hai bên của div?

Nguồn

2011-03-18 Daniel Allen Langdon

Bạn sẽ phải tự động thiết lập lề và có lẽ có chiều rộng cụ thể để wrapper của bạn div

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

Trong CSS của bạn:

#wrapper { 
    width: 70%; 
    margin: 0 auto; 
}

Nguồn

2011-03-18 20:10:42 Daff

Tôi hiểu những gì bạn đang nói; nhưng tại sao 'margin' lại có hai giá trị? –

Về cơ bản, lề có thể có tối đa bốn giá trị đặt [trên cùng, bên phải, dưới cùng, bên trái]. Với hai giá trị bạn đặt lề [trên cùng, bên trái, bên phải] (thiết lập từ trái sang phải để tự động làm cho nó thành tâm) với chỉ một giá trị bạn đặt cùng một lề cho mỗi bên. – Daff

Tôi đã có chính xác cùng một vấn đề và tôi đã thử giải pháp của bạn: http://jsfiddle.net/6ARJX/9/ Đã không làm việc cho tôi, mặc dù. Bất kì lời đề nghị nào? –

Bạn có biết chiều rộng của cả hai div s trước ? Nếu vậy, bạn chỉ có thể làm điều gì đó như

<div class="wrapper" style="margin: 0 auto; width: 200px"> 
    <div class="inner1" style="width: 100px; float:left;"></div> 
    <div class="inner2" style="width: 100px; margin-left: 100px"></div> 
</div>

Nguồn

2011-03-18 20:11:14 Jacob

Hãy thử điều này:

<div id='wrapper' style='text-align:center;'> 
    <div style='float:left;background-color:red;width:50%'> 
     Lorem ipsum<br />dolor sit amet 
    </div> 
    <div style='float:right;background-color:blue;width:50%'> 
     Lorem ipsum<br />dolor sit amet 
    </div> 
</div>

http://jsfiddle.net/JDAyt/

Nguồn

2011-03-18 20:57:15

+1 để đơn giản. 'float: left' và' float: right' là tất cả những gì cần thiết mà không cần gói thêm và css. – dk123

Thay vì sử dụng float: left, sử dụng display: inline-block:

<div id='wrapper' style='text-align: center;'> 
    <div style='display: inline-block; vertical-align: top;'> 
     Lorem ipsum<br /> 
     dolor sit amet,<br /> 
     consectetur adipisicing elit 
    </div> 
    <div style='display: inline-block; vertical-align: top;'> 
     Lorem ipsum<br /> 
     dolor sit amet 
    </div> 
</div>

Đỉnh của mỗi bên trong div được giữ liên kết bằng cách sử dụng vertical-align: top.

Ví dụ: http://jsfiddle.net/hCV8f/1/

Nguồn

2014-05-04 23:31:21

'display: inline-block' không phải lúc nào cũng hoạt động, nhưng điều đầu tiên bạn cần kiểm tra. –

Nó sẽ hoạt động. Chỉ cần đảm bảo rằng nội dung của div bên trái và bên phải không quá lớn, nếu không chúng sẽ rơi xuống dưới cái kia. Một ví dụ. Nếu phần bên phải có nhiều văn bản, hãy cung cấp cho nó một chiều rộng cố định để có văn bản được bao bọc. – dreamerkumar

Đối với div bên trái, hãy đặt lề trái. Đối với div bên phải, hãy đặt quyền. Như thế này:

#leftDiv { 
    margin-left: auto; 
} 

#rightDiv { 
    margin-right: auto; 
}

Điều này đặt chúng trở lại ở giữa màn hình.

Nguồn

2015-07-07 18:06:27 corpico

Dưới đây đang hoạt động tốt với Zebra GC420d Máy in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta charset="utf-8"> 
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } 
    #div { min-height: 100%; } 
    </style> 
    </head> 
    <body> 
    <div style="border: 0px solid red;"> 
    <table border="0" width="100%" align="center"> 
    <tr> 
    <td style="text-align: center;"> 
    <?php 
    echo $name; 
    ?> 
    </td> 
    </tr> 
    <tr><td></td></tr> 
    <tr> 
    <td style="text-align: center;"> 
    <?php 
    echo 'https://goo.gl/2QvRXf'; 
    ?> 
    </td> 
    </tr> 

    </table> 
    </div> 

    </body> 
    </html>

Hy vọng nó sẽ giúp!

Nguồn

2016-02-04 14:26:15

Cách căn giữa hai divs trôi nổi cạnh nhau

Trả lời

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