Đôi khi, bạn muốn căn chỉnh văn bản ở cả bên trái và bên phải trên cùng một dòng như ảnh chụp màn hình sau đây được hiển thị trong tài liệu Word. Tuy nhiên, làm thế nào bạn có thể giải quyết công việc này trong tệp Word?
Căn chỉnh văn bản ở cả bên trái và bên phải trên cùng một dòng của tài liệu Word
Căn chỉnh văn bản ở cả bên trái và bên phải trên cùng một dòng của tài liệu Word
Để hoàn thành nhiệm vụ này một cách nhanh chóng và dễ dàng, vui lòng thực hiện theo từng bước sau
1. Trong tệp Word mà bạn muốn chèn văn bản và căn lề trái phải, sau đó bấm vào Trang chủ, trong nhóm Đoạn văn, bấm vào biểu tượng Cài đặt đoạn văn, xem ảnh chụp màn hình
2. Trong hộp thoại Đoạn văn, chọn Trái từ danh sách Căn chỉnh thả xuống, sau đó bấm vào nút Tab, xem ảnh chụp màn hình
3. Trong hộp thoại Tabs bật ra, hãy thực hiện các thao tác bên dưới
[1. ] Nhập số tab vào hộp văn bản Vị trí dừng tab có nghĩa là vị trí mà bạn muốn văn bản bên tay phải kết thúc;
[2. ] Đánh dấu vào tùy chọn Right trong phần Alignment;
[3. ] Sau đó, nhấp vào nút Đặt;
[4. ] Cuối cùng, nhấp vào nút OK để đóng hộp thoại này
4. Sau khi hoàn tất các thiết lập trên, bây giờ, bạn có thể gõ văn bản ở tay phải. Vui lòng nhấn phím Tab để sang bên tay phải mà bạn đã đặt ở bước trên rồi nhập văn bản vào một dòng, để nhập một dòng mới, vui lòng nhấn Enter và phím Tab, xem ảnh chụp màn hình
5. Sau khi nhập văn bản ở tay phải, hãy đặt con trỏ chuột vào vị trí bên trái mà bạn muốn chèn văn bản, nhập văn bản dòng đầu tiên bình thường, nhấn Mũi tên xuống trên bàn phím để nhập một dòng mới [hoặc có thể đặt con trỏ . Bây giờ, bạn sẽ nhận được kết quả như bạn cần, xem ảnh chụp màn hình
Toàn bộ thủ thuật là sử dụng float. bên trái;
Vì vậy, nếu bạn muốn căn chỉnh văn bản và hình ảnh trong cùng một dòng trong HTML như thế này
căn chỉnh văn bản và hình ảnh trên cùng một dòngCyberBotMachines
sau đó bạn chỉ có thể sử dụng mã này
body {
background-color: deepskyblue;
}
img {
width: 350px;
float: left;
margin-right: 10px;
}
Your long text here...
tóm lại là vậy
Thêm chi tiết
Bây giờ bạn có thể muốn thử thêm một vài tùy chọn để đạt được các hiệu ứng khác nhau
Ví dụ: nếu bạn muốn căn chỉnh văn bản và hình ảnh trên cùng một dòng nhưng bạn không muốn nó nằm bên dưới hình ảnh. Bạn chỉ muốn giữ nó ở bên phải
Vì vậy, về bản chất, bạn muốn có một cái gì đó trông như thế này
sắp xếp văn bản và hình ảnh cạnh nhauCyberBotMachines
Để làm được điều đó, bạn cần giảm độ rộng của phần tử div chứa văn bản. Về cơ bản, cả phần tử hình ảnh và văn bản đều có thể nằm cạnh nhau trên trang
Bây giờ vì div và các thành phần khối khác không tự động lấp đầy trang bên cạnh nhau [ngay cả khi chúng có thể dựa trên chiều rộng của chúng] - bạn phải sử dụng float. bên trái;
Mã cuối cùng mà bạn có thể sử dụng trông giống như thế này
body {
background-color: deepskyblue;
}
img {
width: 350px;
float: left;
margin-right: 10px;
}
div {
float: left;
width: calc[100% - 350px - 10px];
}
Your long text here...
Và đây thực sự là tất cả những gì cần để căn chỉnh văn bản và hình ảnh trên cùng một dòng trong HTML
Bây giờ bạn đã biết cách căn chỉnh hình ảnh và văn bản, bạn có thể muốn tìm hiểu thêm về cách căn chỉnh các phần tử div trong bảng. Bạn có thể đọc thêm về nó trong hướng dẫn này