多行文本垂直居中方法二

最新推荐文章于 2020-03-10 18:05:55 发布

weixin_30337157

最新推荐文章于 2020-03-10 18:05:55 发布

阅读量42

点赞数

原文链接：http://www.cnblogs.com/3box/p/4573093.html

版权

该处用了一个<b>标签的样式来控制了整个父级的垂直居中效果。

复制以下代码到本地，另存为html 运行查看效果：

<!DOCTYPE html>
<html>
 <head> 
  <meta meta="" charset="utf-8" /> 
  <title>Demo</title> 
  <style type="text/css" media="all">

            body{color:black;background-color:white;padding:50px;font-size: 12px;line-height:16px;font-family:arial; color: #1E346E;}

           * {margin: 0;padding:0;border-width: 0;}

            .list{vertical-align: middle;width:640px;margin-bottom: 1px;border: solid 1px #00a0da;background-color:#F0F5FF; }

           .list:hover{background-color:#d9e7f5;}

      

            .list p,.list b { vertical-align: middle;display: -moz-inline-stack;display:inline-block;zoom:1;*display:inline;}

           .list p { padding:10px;}

            

            .list b { height:52px;width:1px;overflow:hidden;margin-left:-1px;background-color:#009Cd0;}

        </style> 
 </head> 
 <body> 
  <div class="list">
   <b>&nbsp;</b>
   <p style="width:80px;">first class</p>
   <p style="width:160px;">Can be modified</p>
   <p style="width:160px;">Can be refunded.</p>
   <p style="width:160px;">Can be endorsed</p>
  </div> 
  <div class="list">
   <b>&nbsp;</b>
   <p style="width: 80px;">Economy class</p>
   <p style="width:160px;">Can be modified</p>
   <p style="width:160px;">Can be refunded.</p>
   <p style="width:160px;">Can be endorsed</p>
  </div> 
  <div class="list">
   <b>&nbsp;</b>
   <p style="width:80px;">23% off Economy class</p>
   <p style="width:160px;">One free change permitted within same class if available; further changes charged 10% of fare. Passengers must go to CA ticketing office to process fee-based changes.</p>
   <p style="width:160px;">10% of fare charged. </p>
   <p style="width:160px;">Can not be endorsed</p>
  </div> 
  <div class="list">
   <b>&nbsp;</b>
   <p style="width:80px;">-6% off Economy class</p>
   <p style="width:160px;">Free change permitted within same class if available at least 4 days prior to departure.</p>
   <p style="width:160px;">20% of fare charged (minimum CNY50 charge).</p>
   <p style="width:160px;">Can not be endorsed</p>
  </div>  
 </body>
</html>

方法总结：

之前做了一个图片垂直居中的案例，现在将它用到文本里面也可以的。

<div class="image">
  <a href="#">
    <i></i>
    <img src="images/sku154288-11.jpg">
  </a>                                    
</div>

看CSS部分：

.imges{
  height:270px;
}

.image i {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.image img{
  vertical-align: middle;
}

上面的例子是图片的，那多行文本呢？

HTML结构：

<li><i></i><span>Wear and keep accessories</span></li>

多行文字垂直居中的方法是在父级里面建一个<i>或者<b>等元素，样式定义

li i  {display:inline-block; height:100%; vertical-align: middle;}

然后用一个span 或者其他标签把文字包起来，样式定义

li span{display:inline-block; vertical-align: middle;}

转载于:https://www.cnblogs.com/3box/p/4573093.html

weixin_30337157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多行文本垂直居中方法二

该处用了一个<b>标签的样式来控制了整个父级的垂直居中效果。复制以下代码到本地，另存为html 运行查看效果：<!DOCTYPE html><html> <head> <meta meta="" charset="utf-8" /> <title>Demo</title> ...
复制链接

扫一扫