search

Cách để ảnh và chữ ngang hàng trong html

1 năms trước
Trả lời: 0
Lượt xem: 33

View Full Version : Làm sao để image ngang hàng với text bây giờ


hoanghai27

04-02-2010, 17:06

Mình muốn làm cho image nó cũng một hàng (text ngang hàng với giữa của image) với dòng text nhưng mò mãi không được, có ai biết cách ko chỉ mình với

Không biết bạn đang dùng table hay là div để làm nên chỉ nói sơ cách làm cả 2.

Nếu bạn dùng table thì trong thể td bạn chỉ cần thêm valign="middle" là được với điều kiện text và image nằm 2 cột khác nhau

Nếu bạn dùng DIV thì có thể xảy ra 2 trường hợp hay gặp nhất:
- <li>text</li><li>Image</li>: ở trường hợp này bạn dùng margin-top để đưa text sao cho chính giửa hình ảnh
- Nếu image là background thì bạn dùng background-position: x, y để điều chỉnh vị trí của hình ảnh.

Trường hợp đặc biệt l bạn có nhiều hình ảnh có kích thước khác nhau thì sẽ phải làm phức tạp hơn. Bạn có thể tham khảo thêm tại

http://www.w3.org/Style/Examples/007/center
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

bạn có thể đưa code ví dụ của bạn được không bạn.

Đây là một vài trường hợp hay gặp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vi du Text canh giua image</title>
<style>
#table td{
border: 1px solid #3366FF;
}
ul {
list-style: none;
}
.div {
width: 300px;
height: 150px;
}
.menu {
background-image: url(icon_check.jpg);
background-repeat: no-repeat;
height: 38px;
padding: 10px 0 0 48px;
}
.div2 li{
float: left;

}
.text {
padding-top: 10px;
padding-left: 10px;
}
</style>
</head>
<body>
<p>Truong hop su dung table</p>
<table id="table">
<tr>
<td><img src="icon_check.jpg" /></td>
<td>Example 1</td>
</tr>
</table>
<p>Dung the Div</p>

<p>1/ Dung Background</p>
<div class="div">
<ul>
<li class="menu">Example Text</li>
</ul>
</div>

<p>1/ Insert image</p>
<div class="div2">
<ul>
<li><img src="icon_check.jpg" /></li>
<li class="text">Example Text</li>
</ul>
</div>
</body>
</html>

Mình chỉ làm một ví dụ đơn giản cho bạn dễ hiểu thôi nhé. Bạn download nó tại đây:

http://www.mediafire.com/?reau2rqyytu

Quartermain

08-02-2010, 13:49

line-height: "chiều cao của bức ảnh". Thế là text nó ở giữa ảnh thôi bạn

Katsumoto

08-02-2010, 15:34

.inlineimg { vertical-align: middle; }
<img class="inlineimg" src="a.gif" border="0" />
Là mã dùng nhúng các biểu tượng vui vào trong text :) thường dùng trong diễn đàn, ví dụ như ddth.com. Chính là chuyển các bbcode
:) thành hình emotion cười như trên
Nghỉ Tết vui vẻ.

Powered by vBulletin® Version 4.2.0 Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.

Tôi muốn văn bản và hình ảnh ở cạnh nhau nhưng tôi muốn hình ảnh ở ngoài cùng bên trái của màn hình và tôi muốn văn bản ở ngoài cùng bên phải của màn hình. Đây là những gì tôi hiện có ...

<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>

Tôi có thể làm cái này như thế nào?

Cảm ơn

  • html
  • css
  • image
  • text

33 hữu ích 3 bình luận 328k xem chia sẻ

answer

35

Cách để ảnh và chữ ngang hàng trong html

img {
    float:left;
}
h3 {
    float:right;
}

ví dụ về jsFiddle

Lưu ý rằng bạn có thể sẽ muốn sử dụng kiểu clear:bothtrên bất kỳ phần tử nào có sau mã bạn đã cung cấp để nó không trượt lên ngay bên dưới các phần tử nổi.

35 hữu ích 2 bình luận chia sẻ

answer

7

Cách để ảnh và chữ ngang hàng trong html

Bạn muốn sử dụng float css cho việc này, bạn có thể đặt nó trực tiếp vào mã của mình.

<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>

Nhưng tôi thực sự khuyên bạn nên học những điều cơ bản về css và tách tất cả các kiểu của bạn ra một bảng kiểu riêng và sử dụng các lớp. Nó sẽ giúp bạn trong tương lai. Một nơi tốt để bắt đầu là w3schools hoặc có lẽ sau đó là Mozzila Dev. Mạng (MDN) .

HTML:

<body>
  <img src="website_art.png" class="myImage"/>
  <h3 class="heading">The Art of Gaming</h3>
</body>

CSS: 

.myImage {
  float: left;
  height: 75px;
  width: 235px;
  font-family: Veranda;
}
.heading {
  float:right;
}

7 hữu ích 0 bình luận chia sẻ

answer

0

Cách để ảnh và chữ ngang hàng trong html

Bạn có thể sử dụng căn chỉnh dọc và nổi.

Trong hầu hết các trường hợp, bạn muốn căn chỉnh theo chiều dọc: giữa, hình ảnh.

Đây là bài kiểm tra: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;

Đối với middle, định nghĩa là: Phần tử được đặt ở giữa phần tử cha.

Vì vậy, bạn có thể muốn áp dụng điều đó cho tất cả các phần tử bên trong phần tử.

0 hữu ích 1 bình luận chia sẻ

Cách để ảnh và chữ ngang hàng trong html

Đăng nhập để trả lời câu hỏi

Có thể bạn quan tâm

Cách để ảnh và chữ ngang hàng trong html

programming html

Bài Viết Liên Quan

Hướng dẫn binary literals in python - các ký tự nhị phân trong python
Hướng dẫn binary literals in python - các ký tự nhị phân trong python

Hướng dẫn bold trong html
Hướng dẫn bold trong html

Hướng dẫn php suppress warnings - cảnh báo ngăn chặn php
Hướng dẫn php suppress warnings - cảnh báo ngăn chặn php

Hướng dẫn downloading php - tải php
Hướng dẫn downloading php - tải php

Hướng dẫn how do i know if a python return is true? - làm cách nào để biết liệu trả về python có đúng không?
Hướng dẫn how do i know if a python return is true? - làm cách nào để biết liệu trả về python có đúng không?

Hướng dẫn get buffer from file nodejs - lấy bộ đệm từ tệp nodejs
Hướng dẫn get buffer from file nodejs - lấy bộ đệm từ tệp nodejs

Bảng giá đất bạc liêu năm 2023
Bảng giá đất bạc liêu năm 2023

Hướng dẫn dùng min key python
Hướng dẫn dùng min key python

Hướng dẫn how do you trim a character in a string in python? - làm thế nào để bạn cắt một ký tự trong một chuỗi trong python?
Hướng dẫn how do you trim a character in a string in python? - làm thế nào để bạn cắt một ký tự trong một chuỗi trong python?

Hướng dẫn dùng html br trong PHP
Hướng dẫn dùng html br trong PHP

MỚI CẬP NHẬP

Bài hát hạt bụi nào hóa kiếp thân tôi năm 2024
6 phúts trước . bởi CommonplaceLifeblood
Người có uy tín là gì năm 2024
15 phúts trước . bởi IntractableInvestment
Bài 57 trang 47 sgk toán 7 tập 2 năm 2024
32 phúts trước . bởi PearlyStaircase
Lỗi access is denied khi share may in win 7 năm 2024
52 phúts trước . bởi MusicalHabitation
15 tháng 7 âm là ngày gì năm 2024
53 phúts trước . bởi Nine-year-oldLocality
Bài văn miêu tả cây cối lớp 4 hay nhat năm 2024
1 giờs trước . bởi ShallowUnderdog
Ổ dịch sốt xuất huyết là gì năm 2024
1 giờs trước . bởi SouthernIntercession
Đáp án đề văn thi thử lần 2 của 2023-2023 năm 2024
1 giờs trước . bởi CivilizedSeeder
Lỗi aegisub bị chấp ở giữa 3.2.2 năm 2024
2 giờs trước . bởi SystemicExclamation
Top phim ăn khách nhật bản tuần qua năm 2024
2 giờs trước . bởi SwellingAdjustment

Xem Nhiều

Yeu tố nước trong kiến trúc cảnh quan là gì năm 2024
6 ngàys trước . bởi PreservingWiring
File kẹp tài liệu đục lỗ tiếng anh là gì năm 2024
1 ngàys trước . bởi InsidiousReceptor
Lỗi khi mở folder màn hình view bị thu nhỏ năm 2024
2 ngàys trước . bởi RegimentalAdoption
Viết bài văn nghị luận về bảo vệ môi trường năm 2024
4 giờs trước . bởi RaspingPatchwork
Rách giời rơi xuống nghĩa là gì năm 2024
3 ngàys trước . bởi VastOrientation
Uống vitamin d vào lúc nào tốt nhất năm 2024
1 ngàys trước . bởi PrimordialHacker
Chính sách kế hoạch hóa gia đình 2023 năm 2024
6 ngàys trước . bởi FinancialAllotment
Những bài toán lớp 1 giúp trẻ tư duy năm 2024
8 giờs trước . bởi AnnoyedWomanhood
He had two trains but they were armored là gì năm 2024
6 ngàys trước . bởi ItinerantDominion
Bởi vì em hết yêu anh đạo từ bài nào năm 2024
3 ngàys trước . bởi ImprovisedTraveler

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.