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

Students



- Name

- Major

- Email

- Lattest

cho nó style=display:inline-block làm cho nó vertical-align:top và đặt hình ảnh bên trong div đó.

2) Lấy một div khác và cũng cho nó cùng một kiểu display:inline-block; và đặt tất cả các nhãn/div bên trong div này.

Đây là nguyên mẫu của yêu cầu của bạn

JS Fiddle Demo

Đã trả lời ngày 10 tháng 10 năm 2013 lúc 17:29Oct 10, 2013 at 17:29

Dhaval Marthakdhaval MarthakDhaval Marthak

17.1k6 Huy hiệu vàng41 Huy hiệu bạc68 Huy hiệu Đồng6 gold badges41 silver badges68 bronze badges

0

Tạo hình ảnh

.linkWithImageIcon{

    Display:inline-block;
}
.MyLink{
  Background:#FF3300;
  width:200px;
  height:70px;
  vertical-align:top;
  display:inline-block; font-weight:bold;
} 

.MyLinkText{
  /*---The margin depends on how the image size is ---*/
  display:inline-block; margin-top:5px;
}

0 và văn bản

.linkWithImageIcon{

    Display:inline-block;
}
.MyLink{
  Background:#FF3300;
  width:200px;
  height:70px;
  vertical-align:top;
  display:inline-block; font-weight:bold;
} 

.MyLinkText{
  /*---The margin depends on how the image size is ---*/
  display:inline-block; margin-top:5px;
}

1

Hãy xem Fiddle này, tôi đã sử dụng một hình ảnh trực tuyến nhưng bạn có thể trao đổi nó cho hình ảnh của bạn.

Đã trả lời ngày 10 tháng 10 năm 2013 lúc 17:19Oct 10, 2013 at 17:19

2

Nếu bạn hoặc một số con cáo khác cần có liên kết với hình ảnh và văn bản biểu tượng dưới dạng văn bản liên kết bên cạnh hình ảnh, hãy xem mã dưới:

CSS

.linkWithImageIcon{

    Display:inline-block;
}
.MyLink{
  Background:#FF3300;
  width:200px;
  height:70px;
  vertical-align:top;
  display:inline-block; font-weight:bold;
} 

.MyLinkText{
  /*---The margin depends on how the image size is ---*/
  display:inline-block; margin-top:5px;
}

HTML

SIGN IN

Nếu bạn thấy hình ảnh phần trắng là biểu tượng hình ảnh và khác là kiểu theo cách này, bạn có thể tạo các nút khác nhau với bất kỳ loại biểu tượng nào bạn muốn thiết kế

Đã trả lời ngày 15 tháng 8 năm 2017 lúc 8:46Aug 15, 2017 at 8:46

Mj xmj xMJ X

7.90512 Huy hiệu vàng65 Huy hiệu bạc95 Huy hiệu Đồng12 gold badges65 silver badges95 bronze badges

Tôi đã có một vấn đề tương tự, trong đó tôi có một div giữ hình ảnh và một div giữ văn bản. Lý do của tôi không hoạt động, là div giữ hình ảnh có

.linkWithImageIcon{

    Display:inline-block;
}
.MyLink{
  Background:#FF3300;
  width:200px;
  height:70px;
  vertical-align:top;
  display:inline-block; font-weight:bold;
} 

.MyLinkText{
  /*---The margin depends on how the image size is ---*/
  display:inline-block; margin-top:5px;
}

2 trong khi div giữ văn bản có

.linkWithImageIcon{

    Display:inline-block;
}
.MyLink{
  Background:#FF3300;
  width:200px;
  height:70px;
  vertical-align:top;
  display:inline-block; font-weight:bold;
} 

.MyLinkText{
  /*---The margin depends on how the image size is ---*/
  display:inline-block; margin-top:5px;
}

3.

Tôi đã thay đổi nó thành cả hai và nó đã hoạt động.

Dưới đây là giải pháp cho phần tiêu đề cơ bản với logo, tiêu đề và khẩu hiệu:

HTML

  

    
  


  
Site Title
  
Site Tagline

CSS

div.site-branding { /* Position Logo and Text  */
  display: inline-block;
  vertical-align: middle;
}

div.site-branding-logo { /* Position logo within site-branding */
  display: inline;
  vertical-align: middle;
}

div.site-branding-text { /* Position text within site-branding */
    display: inline;
    width: 350px;
    margin: auto 0;
    vertical-align: middle;
}

div.site-branding-title { /* Position title within text */
    display: inline;
}

div.site-branding-tagline { /* Position tagline within text */
    display: block;
}

HTML

Nếu bạn thấy hình ảnh phần trắng là biểu tượng hình ảnh và khác là kiểu theo cách này, bạn có thể tạo các nút khác nhau với bất kỳ loại biểu tượng nào bạn muốn thiết kế3 gold badges46 silver badges62 bronze badges

Đã trả lời ngày 15 tháng 8 năm 2017 lúc 8:46May 13, 2017 at 20:46

0