masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 不同元素对齐的问题：需要底部，或者是中间对齐。_html/css_WEB-ITnose

不同元素对齐的问题：需要底部，或者是中间对齐。_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 12:15:52
asal
1199 orang telah melayarinya

<table>    <tr>        <td>            <input type="text" style="height:16px; width:27px" id="text1" />            <input type="image" src="images/logo.gif" style="height:16px; width:16px;" id="image1" />        </td>    </tr></table>
Salin selepas log masuk


怎么写样式可以让image1和text1底部对齐（或者中间对齐）？？

按照上面的写法，image1的显示位置总会高于text1
（貌似image1的底部是和text1的中间对齐的，如果将两个元素分别放到不同的TD，垂直对齐样式就又起作用了！）。

按照上面的写法，使用CSS怎么设置对齐？


回复讨论(解决方案)

image1和text1底部对齐: 

<table>    <tr>        <td>            <input type="text" style="height:16px; width:27px" id="text1" />            <input type="image" src="images/logo.gif" style="height:16px; width:16px; vertical-align:bottom" id="image1" />        </td>    </tr></table>
Salin selepas log masuk

原来我样式加错了，我一直往TD上加，都不起作用。。。

用css 控制 最终还是会遇到 兼容的问题，还不如改页面的好呢。 

<table>    <tr>        <td>            <input type="text" style="height:16px; width:27px" id="text1" />        </td>        <td>            <input type="image" src="images/logo.gif" style="height:16px; width:16px;" id="image1" />        </td>    </tr></table>
Salin selepas log masuk

Label berkaitan：
不同元素对齐的问题：需要底部，或者是中间对齐。
sumber：php.cn
Artikel sebelumnya：html代码中如何改变usemap热区颜色_html/css_WEB-ITnose Artikel seterusnya：很简单的问题，帮忙解决一下，谢谢。_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2193
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2340
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1963
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1851
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1910
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan