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

如题所述

1、首先先进行文本框的插入,在word文档编辑界面上,单击上方工具栏中的“插入”按钮,包括文本框,所有的插入选项都在这里。

2、在“插入”选项的下拉工具栏中,选择如图所示“文本框”图标单击。

3、接下来会弹出文本框样式的选择框,在里面可以根据需要选择文本框样式。这里以简单文本框为例,单击选择框中的”简单文本框“。

4、在文档编辑区出现的如图所示文本框中,将原有的选择文字删去就可以编辑文字了。

5、编辑好文字后,选中刚才编辑的文字。接下来进行的是对于文字居中了。

6、单击上方工具栏中的“开始”选项,会出现下拉工具栏。关于文本的设置就在这里。

7、在“开始”选项的下拉工具栏中,“段落”设置中的“居中”设置。

8、至此设置完毕,可看到文本框中选中的文字已经在文本框中央,单击任意空白处取消选中即可。

9、完成效果如下。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2019-05-24

方法步骤如下:

1、首先打开计算机,使用浏览器打开a.html,可以看到默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐。

2、再次编辑a.html,加入以下css代码:.hlong *{display:inline-block;vertical-align:middle}。

3、再次使用浏览器访问a.html页面即可成功让div里边的图片和文字同时上下居中。

本回答被网友采纳
第2个回答  推荐于2017-09-13

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属性存在兼容问题,可以把手机端的效果截图看看么?

追问

.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实现垂直居中。

追问

高手就是高手!

本回答被提问者和网友采纳
第3个回答  2015-10-18
height:500px;
line-height:500px;
width:600px;
text-align:center;追问

文字上下居中呢

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网