programming html

Cách đặt văn bản cạnh nhau trong html

Một trong những nhiệm vụ phổ biến mà các nhà phát triển web phải đối mặt là làm thế nào để đặt hình ảnh và văn bản cạnh nhau trong HTML mà không chồng chéo lên nhau. Trong hầu hết các trường hợp, bạn chỉ cần dán hình ảnh hoặc video vào tài liệu của mình và nhập văn bản xung quanh đó

Tuy nhiên, nếu văn bản hoặc hình ảnh quá dài so với không gian bạn có sẵn trên trang, bạn có thể phải thiết kế lại bố cục hoặc đặt hình ảnh ở nơi khác trên trang của mình

Điều này có thể hơi khó thực hiện, nhưng có một số kỹ thuật đơn giản mà bạn có thể sử dụng

In this tutorial, we’ll demonstrate how to put an image and text side by side in your HTML project. We will use the

Bao gồm CSS

The next step is to add some styling so that the text is bigger and bolder than the rest of the image. To do this, use CSS to specify the size of the

element and ensure that the text is beside the image.

Đoạn mã sau sẽ hiển thị hình ảnh và đặt nó có cùng kích thước với văn bản

.container {
 display: grid;
 align-items: center; 
 grid-template-columns: 1fr 1fr 1fr;
 column-gap: 5px;
}

img {
  max-width: 100%;
  max-height:100%;
}

.text {
  font-size: 70px;
}
Code language: CSS [css]

Sử dụng phương pháp flexbox

Nếu bạn đang tìm cách nhúng văn bản và hình ảnh cạnh nhau trong HTML, thì bạn có thể sử dụng mô-đun bố cục flexbox. Đây là cách

In your HTML, create a container element for your text and image. For example, you can nest a
inside a
like this:
Bộ chọn thuộc tính CSS có thể được sử dụng để thay đổi thuộc tính hiển thị của vùng chứa thành "flex". Chẳng hạn, bạn có thể đặt phần sau vào tệp CSS của mình. . trình bao bọc văn bản { hiển thị. uốn cong;
Tiếp theo, xác định một số thuộc tính cho phần con của vùng chứa – hình ảnh và văn bản. Để thực hiện việc này, hãy tạo các quy tắc CSS riêng cho từng thành phần bằng cách sử dụng bộ chọn thuộc tính [trong trường hợp này là ký hiệu >]
Ví dụ: bạn có thể thêm các quy tắc sau vào tệp HTML



  
    Pretty Paris
  
  
  .container {
  display: flex;
  align-items: center;
  justify-content: center
}

img {
  max-width: 100%;
  max-height:100%;
}

.text {
  font-size: 20px;
  padding-left: 20px;
}
  
  
    
      
        
      
      
        Paris is one of the most magnificient cities in France.
      
    
  

  
Code language: HTML, XML [xml]

Với các quy tắc này, vùng chứa của bạn bây giờ sẽ trông giống như thế này

Sử dụng văn bản nổi

Văn bản nổi là một cách tuyệt vời để tạo một hình ảnh nổi bật so với văn bản xung quanh

Chúng tôi sẽ chỉ cho bạn cách thực hiện với thuộc tính float

The first thing we need to do is add the image to our HTML document. We can do this by using the img element, like this:
Hình ảnh bên trái – mã HTML bên phải 🙂

Sự kết luận
Đặt hình ảnh và văn bản cạnh nhau trong HTML là một cách tuyệt vời để tạo một trang web trực quan hấp dẫn. Có một vài cách khác nhau để làm điều này bằng cách sử dụng nhưng cách dễ nhất là sử dụng thuộc tính ‘align’. Với một chút mã, bạn có thể căn chỉnh hình ảnh và văn bản một cách hoàn hảo trên trang web của mình. Cảm ơn vì đã đọc
Học lập trình trên codedamn
Codedamn là một nền tảng mã hóa tương tác với rất nhiều khóa học lập trình hấp dẫn có thể giúp bạn có được công việc viết mã đầu tiên của mình. Đây là cách
- Bước 1 - Tạo một tài khoản miễn phí
- Bước 2 - Duyệt qua các lộ trình có cấu trúc [đường dẫn học tập] hoặc xem tất cả các khóa học
- Bước 3 - Thực hành viết mã miễn phí trên các sân chơi lập trình
- Bước 4 - Nâng cấp lên tài khoản thành viên Pro để mở khóa tất cả các khóa học và nền tảng
Lập trình là một trong những công việc có nhu cầu cao nhất hiện nay. Học lập trình có thể thay đổi tương lai của bạn. Tất cả tốt nhất

Bao gồm CSS

Sử dụng phương pháp flexbox

Sử dụng văn bản nổi

Sự kết luận

Học lập trình trên codedamn

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề