css如何使div里面的文字垂直对齐

发布网友发布时间：2022-04-20 04:56

共8个回答

懂视网时间：2022-04-28 16:44

在浏览网页时，经常看到一些段落他是垂直对齐的，今天这篇文章就和大家讲讲如何用CSS设置段落的垂直对齐，有需要的朋友可以参考一下，希望对你有所帮助。

CSS中通过属性vertical-align来设置段落的垂直对齐方式。

注意，对于文字本身而言，该属性对于块级元素并不起作用，例如<p>和<div>等标记，但是，对于表格而言，这个属性十分的重要。

<span style="font-size:24px;"><html>
<head>
<title>
垂直对齐
</title>
<style>
<!--
td.top{vertical-align:top;}
td.bottom{vertical-align:bottom;}
td.middle{vertical-align:middle;}
-->
</style>
</head>

<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="top">垂直对齐方式，top</td>
</tr>
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="bottom">垂直对齐方式，bottom</td>
</tr>
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="middle">垂直对齐方式，middle</td>
</tr>
</body>
</html>
</span>

如上代码，建立了一个3行2列的表格，其中左侧一列均为图片，起到了将单元格的高度加大的作用，同时也作为对比。

右侧的一列为文字，分别采用了顶端对齐、底端对齐和中间对齐的方式，对应的CSS的值分别为top、bottom和middle。

如果，对vertical-align属性设置了具体的数值，对于文字本身，则可以在垂直方向上发生位移。

<span style="font-size:24px;"><html>
<head>
<title>
垂直对齐
</title>
<style>
<!--
span.zs{vertical-align:10px;}
span.fs{vertical-align:-10px;}
-->
</style>
</head>

<body>
<p>给对齐属性设置具体<span class="zs">数值</span>，正数</p>
<p>给对齐属性设置<span class="fs">具体</span>数值，负数</p>
</body>
</html>
</span>

如上代码，当属性值为正数时，文字将向上移动相应的数值，设置为负数时则向下移动。

此外，vertical属性还有很多其他值，不过主要是适用于图片。

热心网友时间：2022-04-28 13:52

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：p {border: 1px solid #0b93d5; height: 30px; padding: 10px;}。

3、浏览器运行index.html页面，此时每个部分的文字距离上边界和下边界的距离是相等的。

热心网友时间：2022-04-28 15:10

你直接把图片设置为div的背景图片，然后再设置padding-top和padding-bottom就可以达到效果了

热心网友时间：2022-04-28 16:44

设置容器的高度。然后在设置内容的高度和容器的高度一样就可以使上边距和下边距一样了，要是不想一样可以具体设置padding的值或者用margin也可以

热心网友时间：2022-04-28 18:36

　　css中的vertical-align 属性设置元素的垂直对齐方式，可能的值：
　　baseline 默认。元素放置在父元素的基线上。
　　sub 垂直对齐文本的下标。
　　super 垂直对齐文本的上标
　　top 把元素的顶端与行中最高元素的顶端对齐
　　text-top 把元素的顶端与父元素字体的顶端对齐
　　middle 把此元素放置在父元素的中部。
　　bottom 把元素的顶端与行中最低的元素的顶端对齐。
　　text-bottom 把元素的底端与父元素字体的底端对齐。
　　% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
　　inherit 规定应该从父元素继承 vertical-align 属性的值。

　　如下代码即可实现垂直对其：
　　.img{vertical-align:bottom}

　　.input{vertical-align:bottom}

　　<p>
　　<img class="img" border="0" src="/i/eg_cute.gif" />
　　<input class="input" />
　　</p>

热心网友时间：2022-04-28 20:44

<div id="div1" style="width:100px; height:40px; line-height:40px; font-size:12px; text-align:center; background:#CC3;">test</div>
是这个效果么？line-height的高度等于DIV高度就可以垂直居中了

热心网友时间：2022-04-28 23:08

在css文件中加入p{vertical-align:middle;text-indent:2em;line-height：200%;}试试

热心网友时间：2022-04-29 01:50

vertical-align:middle;

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com