CSS实现同一行的图片和文字垂直居中对齐的方法
生活随笔
收集整理的這篇文章主要介紹了
CSS实现同一行的图片和文字垂直居中对齐的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
有些朋友會發現，如果一行內容中有圖片有文字的話，文字往往會自動的底部對齊，影響美觀，那如何讓它們相對于垂直居中呢，很簡單，就是在圖片和文字所在的行中添加CSS屬性：vertical-align:middle;這樣，它們在同一行就會垂直居中對齊了。
<!DOCTYPE html>
<html>
<head>
<title>讓同一行內的圖片和文字垂直居中對齊</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
font-size: 9pt;
}
#buttons * {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="buttons">
<img src="reg.gif">
<img src="login.gif">
<a href="#">找回密碼</a>
</div>
上邊的圖片、文字是不是都垂直對齊了呢？
</body>
</html>
總結
以上是生活随笔為你收集整理的CSS实现同一行的图片和文字垂直居中对齐的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 涨工资！特斯拉员工联名抗议：股价猛涨薪水
- 下一篇： 银河航天发射首发星成功 雷军：很幸运成早