CSS完成同1行的照片和文本竖直垂直居中对齐的方

日期:2021-01-20 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

本文案例讲述了CSS完成同1行的照片和文本竖直垂直居中对齐的方式。共享给大伙儿供大伙儿参照。实际剖析以下:

一些盆友会发现,假如1行內容中有照片有文本的话,文本常常会全自动的底部对齐,危害美观大方,那怎样让它们相对竖直垂直居中呢,很简易,便是在照片和文本所属的行中加上CSS特性:vertical-align:middle;这样,它们在同1行就会竖直垂直居中对齐了。


拷贝编码
编码以下:

<!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>
<title>让同1行内的照片和文本竖直垂直居中对齐</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<style>
body{
font-size:9pt;
}
#buttons *{
vertical-align:middle;
}
/*假如上边的兼容问题火狐等,能够把下面这句也再加!
#buttons *{
vertical-align:middle;
}
*/
</style>
</head>
<body>
<div id="buttons">
<img src="/jscss/demoimg/200902/reg.gif">
<img src="/jscss/demoimg/200902/login.gif">
<a href="#">找到登陆密码</a>
</div>
上边的照片、文本是否都竖直对齐了呢?
</body>
</html>

期待本文所述对大伙儿的div+css网页页面设计方案有一定的协助。

上一篇:变更提交按钮的款式示例 返回下一篇:没有了