HTML span align center không hoạt động?

107

Tôi có một số HTML:

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

Div đang thay đổi khoảng cách trên tài liệu của tôi, vì vậy tôi muốn sử dụng khoảng cách cho việc này thay thế.

Nhưng span không tập trung các nội dung:

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

Làm cách nào để sửa lỗi này?

BIÊN TẬP:

Mã hoàn chỉnh của tôi:

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<span style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>

html css

— David19801
nguồn

1

Div của bạn đang "thay đổi khoảng cách"? Ý bạn là gì? Và span của bạn sẽ không vì theo mặc định nó là một phần tử nội tuyến , trong khi div là một phần tử mức khối .

— Bojangle

Xin chào JamWaffles, Bằng cách "giãn cách", ý tôi là div thêm khoảng trống ở trên và dưới nội dung. Khoảng không làm điều này.

— David19801

Sử dụng Firebug hoặc trình kiểm tra Chrome để xem quy tắc CSS nào được áp dụng cho phần tử của bạn và tìm quy tắc thêm phần đệm hoặc lề. Cũng có thể các yếu tố xung quanh có phần đệm / lề.

— Bojangle

5

text-align=centernêntext-align:center

— n611x007

197

Một div là một phần tử khối và sẽ kéo dài chiều rộng của vùng chứa trừ khi chiều rộng được đặt. Khoảng là một phần tử nội dòng và sẽ có chiều rộng của văn bản bên trong nó. Hiện tại, bạn đang cố gắng đặt căn chỉnh làm thuộc tính CSS. Căn chỉnh là một thuộc tính.

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

Tuy nhiên, thuộc tính align không được dùng nữa. Bạn nên sử dụng thuộc tính CSS text-aligntrên vùng chứa.

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>

— Sẽ
nguồn

46

Vui lòng sử dụng phong cách sau đây. margin:autothường được sử dụng để căn giữa nội dung. display:tablecần thiết cho spanphần tử

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>

— Chris J
nguồn

37

Các alignthuộc tính bị phản đối. Sử dụng CSS text-alignđể thay thế. Ngoài ra, khoảng cách sẽ không căn giữa văn bản trừ khi bạn sử dụng display:blockhoặc display:inline-blockvà đặt một giá trị cho chiều rộng, nhưng sau đó nó sẽ hoạt động giống như một div (phần tử khối).

Bạn có thể đăng một ví dụ về bố cục của bạn? Sử dụng www.jsfiddle.net

— Lucifer Sam
nguồn

Làm việc rất tốt! Cảm ơn.

— dallinchase

Tôi không thể căn chỉnh hai phần tử nội tuyến khác nhau trong khi vẫn giữ chúng trong các phần tử nội tuyến?

— Daniel Springer

10

span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

Đối với tôi, nó hoạt động rất tốt. thử cái này cũng được

— CÓ THỂ
nguồn

2

Trên tất cả các giải thích khác, tôi tin rằng bạn đang sử dụng "="dấu bằng , thay vì dấu hai chấm ":":

<span style="border:1px solid red;text-align=center">

Nó phải là:

<span style="border:1px solid red;text-align:center">

— nhazean
nguồn

1

Span là khối nội tuyến và điều chỉnh theo kích thước văn bản nội tuyến, với độ bền cao ngăn chặn hầu hết các nỗ lực tạo kiểu ngoài ngữ cảnh nội tuyến. Để đơn giản hóa kiểu bố cục (hạn chế xung đột), hãy thêm div vào thẻ 'p' với dấu ngắt dòng.

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>

— đánh dấu món hầm
nguồn

-7

Chỉ cần sử dụng word-wrap:break-word;trong css. Nó hoạt động.

— Thứ hai
nguồn