css html 如何让div里边的图片和文字同时上下居中？
4个回答
展开全部
1、首先先进行文本框的插入，在word文档编辑界面上，单击上方工具栏中的“插入”按钮，包括文本框，所有的插入选项都在这里。
2、在“插入”选项的下拉工具栏中，选择如图所示“文本框”图标单击。
3、接下来会弹出文本框样式的选择框，在里面可以根据需要选择文本框样式。这里以简单文本框为例，单击选择框中的”简单文本框“。
4、在文档编辑区出现的如图所示文本框中，将原有的选择文字删去就可以编辑文字了。
5、编辑好文字后，选中刚才编辑的文字。接下来进行的是对于文字居中了。
6、单击上方工具栏中的“开始”选项，会出现下拉工具栏。关于文本的设置就在这里。
7、在“开始”选项的下拉工具栏中，“段落”设置中的“居中”设置。
8、至此设置完毕，可看到文本框中选中的文字已经在文本框中央，单击任意空白处取消选中即可。
9、完成效果如下。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
方法步骤如下：
1、首先打开计算机，使用浏览器打开a.html，可以看到默认情况，是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。
2、再次编辑a.html，加入以下css代码：.hlong *{display:inline-block;vertical-align:middle}。
3、再次使用浏览器访问a.html页面即可成功让div里边的图片和文字同时上下居中。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
img标签是行内元素，所以设置文本和图片垂直居中只需要把div的line-height设置成和div的height值相同即可。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
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 >
第一项
<img src="1.png" width="120" height="120" />
</div>
</body>
</html>
更多追问追答
追问
手机和平板上的兼容性能保证吗？我在平板上调试时，如下
再在手机上就不行了
追答
没听过说也没遇到line-height属性存在兼容问题，可以把手机端的效果截图看看么？
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
height:500px;
line-height:500px;
width:600px;
text-align:center;
line-height:500px;
width:600px;
text-align:center;
追问
文字上下居中呢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
