如题所述
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属性存在兼容问题,可以把手机端的效果截图看看么?
追问.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实现垂直居中。
追问高手就是高手!
本回答被提问者和网友采纳line-height:500px;
width:600px;
text-align:center;追问
文字上下居中呢