Hướng dẫn text next to image html - văn bản bên cạnh hình ảnh html

Nếu bạn muốn trang web của bạn trông đẹp và hài hòa, thì đoạn trích này là dành cho bạn. Nó sẽ giúp bạn học cách căn chỉnh văn bản bên cạnh một hình ảnh theo chiều dọc. Hãy cùng nhau lặn và học cách làm điều đó cùng nhau!

Tạo HTML

  • Đặt ba yếu tố và cung cấp cho họ các bộ phận container, hình ảnh, hình ảnh và các tên văn bản của văn bản.
  • Đặt hình ảnh của bạn trong phần tử thứ hai với sự trợ giúp của thẻ và thuộc tính SRC của nó.src attribute.
  • Thêm một số văn bản trong phần tử.



  
    The title of the document
  
  
    
Hướng dẫn text next to image html - văn bản bên cạnh hình ảnh html

Paris is one of the most beautiful cities in France.

Thêm CSS

  • Đặt thuộc tính hiển thị và chọn giá trị "Flex". Nó sẽ đại diện cho phần tử như một thùng chứa cấp độ khối.
  • Sử dụng thuộc tính ALIGN-items với giá trị "trung tâm" để đặt các mục ở trung tâm của container.
  • Đặt thuộc tính nội dung biện minh thành "trung tâm".
  • Đặt hình ảnh chiều rộng tối đa của hình ảnh lên 100% với thuộc tính chiều rộng tối đa.
  • Đặt thuộc tính Flex-Basis của lớp "Hình ảnh" để chỉ định kích thước chính ban đầu của hình ảnh của bạn.
  • Chọn kích thước phông chữ của văn bản của bạn với sự trợ giúp của thuộc tính kích thước phông chữ.
  • Sử dụng thuộc tính Padding-Heft để đặt không gian đệm ở phía bên trái văn bản.

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

img {
  max-width: 100%
}

.image {
  flex-basis: 40%
}

.text {
  font-size: 20px;
  padding-left: 20px;
}

Bạn có thể tạo kiểu văn bản với các thuộc tính khác, chẳng hạn như màu sắc, liên kết văn bản, trang trí văn bản, chuyển đổi văn bản, shadow văn bản, v.v.

Bây giờ, hãy để Lừa đặt các bộ phận mã với nhau và xem kết quả.

Ví dụ về việc căn chỉnh theo chiều dọc một văn bản bên cạnh hình ảnh:

html>
<html>
  <head>
    <title>The title of the documenttitle>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center
      }
      img {
        max-width: 100%
      }
      .image {
        flex-basis: 40%
      }
      .text {
        font-size: 20px;
        padding-left: 20px;
      }
    style>
  head>
  <body>
    <div class="container">
      <div class="image">
        <img src="https://i.pinimg.com/originals/26/ea/fc/26eafc0b14488fea03fa8fa9751203ff.jpg">
      div>
      <div class="text">
        <h2>Paris is one of the most beautiful cities in France.h2>
      div>
    div>
  body>
html>

Kết quả

Hướng dẫn text next to image html - văn bản bên cạnh hình ảnh html

Paris là một trong những thành phố đẹp nhất ở Pháp.

Bạn có thể tạo kiểu văn bản với các thuộc tính khác, chẳng hạn như phông chữ, màu sắc, trang trí văn bản, shadow văn bản, v.v.

Ví dụ về kiểu dáng một văn bản được căn chỉnh theo chiều dọc:

html>
<html>
  <head>
    <title>The title of the documenttitle>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center
      }
      img {
        max-width: 100%
      }
      .image {
        flex-basis: 70%;
        order: 2;
      }
      .text {
        color: #CD5C5C;
        padding-left: 20px;
        font: italic 10px "Fira Sans", serif;
      }
    style>
  head>
  <body>
    <div class="container">
      <div class="image">
        <img src="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
      div>
      <div class="text">
        <h2>London is the capital and largest city of England.h2>
      div>
    div>
  body>
html>