水平垂直居中块级元素较好的完成

日期:2021-03-08 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

 

如上图所示,要做图中黄色地区的期满提示,规定提示的內容(提示的內容是指黄色情况上的标志和文本)垂直居中显示信息。

我将图中的惊叹号标志作为提示內容的情况照片解决, 而这就规定內容区有1个高宽比,因此內容区务必是block-level的。 但block level的元素的宽度默认设置等于父元素的宽度,这样的话內容将从黄色左侧界刚开始显示信息. 且设定text-align: center; 只能将文本垂直居中而没法将情况照片垂直居中且显示信息在文本的左侧。

以前想的1个做法:

给內容区 设定1个width, 随后 margin: 0 auto; 随后情况精准定位在內容的左侧再设1个padding-left便可。这类做法的缺陷是不灵便,1旦文本有转变或情况照片尺寸要变就必须修改款式表。

较好的完成:

将內容区display: inline-block, 情况图的设定跟dispaly:block时1样,即background-position: left; padding-left: 50px; 便可。随后黄色区 text-align: center; 详细编码以下:

拷贝编码
编码以下:

<!-- 应用天数小于等于30天和显示信息‘将要期满’ -->
<div class="almost-expire-tip">
<div class="almost-expire-tip-content">您的账号将要期满,为便捷您的应用,请尽快与工作能力天空市场销售联络。联络电話:4006164080</div>
</div>

在CODE上查询编码片派生到我的编码片

拷贝编码
编码以下:

.almost-expire-tip { width: 100%; height: 68px; line-height: 68px; background: #FC0; text-align: center; }
.almost-expire-tip-content { display:inline-block; *display:inline; *zoom:1; padding-left: 50px; background: #FC0 url(http://www.ablesky-a.com:8080/ableskystatics/images/organizationAdmin/sprite_ico.png) no-repeat 0 ⑺0px; font-size: 22px; }

情况照片竖直方位的⑺0px是由于应用了css sprite合拼了照片。