当前位置：科普经验站>IT科技>html中怎么使图片和文字居中对齐

html中怎么使图片和文字居中对齐

科普经验站人气：1.96W

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

web开发中，同学们经常遇到的一个问题是，当将图片和文字放置在一个div标签的时候，如果不加任何修改，是无法水平居中对齐的，显然这个不是很美观，本经验将提供一种居中对齐的方法，希望对需要的同学有所帮助，也欢迎大家交流其他更好的方法。

材料/工具

html/css 代码编辑器浏览器

.top ul li 下面添加：text-align: center;line-heigh

方法

首先新建a.html文件，并准备一张小标，如下：

按照如下修改就可以对齐了<!DOCTYPE html"><html&g

使用浏览器打开a.html，可以看到默认情况，是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐，如下：

需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件

再次编辑a.html，加入以下css代码：

在表单的标头中加入 align="center" 居中代码

.hlong *{display:inline-block;vertical-align:middle}

在css中，背景图片是可以选择显示的位置的，用像素控制，背景居中的话直接用这个代码.beijing

保存

再次使用浏览器访问a.html页面，效果如图。是不是很简单呢？

img是内联元素，p标签是块级元素，所以p标签内的文字换行很正常。strong标签是内联元素，所

扩展阅读，以下内容您可能还感兴趣。

html如何使文字和图片的中部对齐?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<style>

.main{ vertical-align:middle}

</style>

</head>

<body>

我是和图片e79fa5e98193e4b893e5b19e31333337383833居中对齐滴。<img src="file:///C|/Users/Administrator/Desktop/QQ图片*0403172529.png" style="vertical-align:middle" width="276" height="267" />

</div>

</body>

</html>

css中让文字和图片对齐的问题

百　img是内联元素，p标签是块级度元素，所以p标签内的文字换行很正常。strong标签是知内联元素道，所以会跟img处于同一行，想要img跟strong中的文字专垂直居中属对齐，需要设置img的vertical-align为middle。

html里面table表格中如何移动图片使其和文字对齐

按照如下e79fa5e98193e59b9ee7ad9431333337383961修改就可以对齐了

<!DOCTYPE html">

<html>

<head>

<title>无标题文档</title>

table{width:1200px;margin:0px auto;}

tr{width:1200px;height:30px;list-style-type:none;}

th{border:1px solid #000;font-size:12px;font-family:"微软雅黑";line-hegiht:30px;}

/*修正1 设置垂直对齐为居中*/

th>span,th>img {

vertical-align: middle;

}

</style>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>追问大神问一个问题 th>span,th>img 这是什么写法？是啥意思追答匹配所有th标记下的子代span和img标记

css html 如何让div里边的图片和文字同时上下居中？

img标签是行内知元素，所以设置文本和图片垂直道居中只需要把div的line-height设置内成和div的height值相同即可。

代码：容

<!DOCTYPE html>

<head>

<title>Document</title>

div{width: 400px; height: 400px; margin: 20px;line-height: 400px;font-size: 26px; border: 1px solid red;background-color: #ccc;}

div>img{ vertical-align: middle;}

</style>

</head>

<body>

<div >

第一项

</div>

</body>

</html>更多追问追答追问

手机和平板上的兼容性能保证吗？我在平板上调试时，如下

再在手机上就不行了

追答没听过说也没遇到line-height属性存在兼容问题，可以把手机端的效果截图看看么？追问.bottomBtn > ul > li > img{display: inline-block; width:3.125rem;height:2.375rem;vertical-align: middle;}图像部分的css，在平板上我调节inlineheight 可以居中，但是再用手机调试时就不行了追答你这个说的是哪一块呢？那段文字不显示了应该是line-height>height了。追问

bottomBtn > ul > li > img{display: inline-block; width:3.125rem;height:2.375rem;vertical-align: middle;} 说的是

追答line-height>height了追问

.footTitle{color: #333;font-size: 1rem;line-height: 10rem}

我想让手机上边如下显示

追答不知道你包裹img的li标签的属性是怎么设置的？追问.bottomBtn > ul > li{height: 32.5%;margin:5% 0%; }

.bottomBtn > ul {height: 90%;}

.bottomBtn{width:25%;height:85%;float: left;margin-top: 65px;}追答你li标签的高度是设置的百分比，到手机端32.5%要小于line-height: 10rem。肯定就是这个效果呀。要么把li标签的高度也定位rem。或者不要是指line-height。通过margin实现垂直居中。追问高手就是高手！

div+css中图片和文字对齐

</style>

#content

{

width:422px;

height:180px;

border-bottom:1px dashed #96c5ef;

}

img{

border:2px solid #ca0000;

float:left;

}

.left{

float:left;

vertical-align:middle;

}

.right{

float:right;

width:230px;

font:12px;

}

</style>

</head>

<body>

<img src="images/1.jpg"

align="absmiddle">