让div里的图片和文字垂直水平居中

于 2023-11-18 12:58:31 发布
阅读量248 收藏
点赞数
文章标签： javascript 前端 css html css3
原文链接：https://mp.weixin.qq.com/s?__biz=Mzg5Mzg1ODg2OA==&mid=2247485639&idx=2&sn=010267709c486d712d0af075dce2a1e7&chksm=c0292d9cf75ea48ac8f565cd4ef8e5f19fbc6a4ef15649204829fc9f61623f7de55ad957f896&scene=126&sessionid=0
版权 
<html>
 <head></head>
 <body>
  <div id="tabList" style="height:40px;"> 
   <li style="display:inline;font-size:14px;"> <span id="DY1" style="height:40px;line-height:40px;width:100px;float: left;"> 
     <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; width: 100%;"> 
      <div style="margin:auto;">
       <img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;" /> 动议
      </div> 
     </div> </span> <span id="DY2" style="color:black ;height:40px;line-height:40px;background: #ffffff;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px;width: 100px;display: block;text-align: center;float: left;">动议</span> </li> 
   <li style="display:inline"> <span id="MZ1" style="height:40px;line-height:40px;width:100px;float: left;"> 
     <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; width: 100%;"> 
      <div style="margin:auto;">
       <img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;margin-right:5px;" /> 民主推荐
       <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;margin-left:-17px;"></div>
      </div> 
     </div> </span>  <span id="MZ2" style="color:#2E8DED ;height:40px;line-height:40px;background: #FFFFFF;border:solid 1px #dee3ec;border-right:0px;border-bottom:0px;width: 100px;display: block;text-align: center;float: left;">民主推荐</span> </li> 
   <li style="display:inline"> <span id="ZZKC1" style="color:black;height:40px;line-height:40px;background: #009933;border:solid 0px #dee3ec;border-right:0px; width: 100px;text-align: center;float: left;"> 
     <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; width: 100%;"> 
      <div style="margin:auto;">
       <img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;margin-right:5px;" />组织考察
       <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;margin-left:-15px;"></div>
      </div> 
     </div> </span> <span id="ZZKC2" style="color:#2E8DED ;height:40px;line-height:40px;background: #FFFFFF;border:solid 1px #dee3ec;border-right:0px;border-bottom:0px;width: 100px;display: block;text-align: center;float: left;">组织考核</span> </li> 
   <li style="display:inline"> <span id="TLJD1" style="height:40px;line-height:40px;width:100px;float: left;"> 
     <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; width: 100%;"> 
      <div style="margin:auto;">
       <img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;margin-right:5px;" />讨论决定
       <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;margin-left:-17px;"></div>
      </div> 
     </div> </span> <span id="TLJD2" style="color:#999999;height:40px;line-height:40px;background: #EEEEEE;border:solid 0px #dee3ec; border-left:0px;width: 100px;display: block;text-align: center;float: left;">讨论决定
     <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;"></div></span> </li> 
   <li style="display:inline"> <span id="RZ1" style="height:40px;line-height:40px;width:100px;float: left;"> 
     <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; width: 100%;"> 
      <div style="margin:auto;">
       <img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;" /> 任职
       <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;margin-left:-17px;"></div>
      </div> 
     </div> </span> <span id="RZ2" style="color:#999999;height:40px;line-height:40px;background: #EEEEEE;border:solid 0px #dee3ec; border-left:0px;width: 100px;display: block;text-align: center;float: left;">任职
     <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;"></div></span> </li> 
  </div>
 </body>
</html>

效果

2ef111d34a2c126693a8f6f2b94504b2.png

小明的学习圈子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div框水平垂直居中跟内容垂直居中.html
03-31
div框水平垂直居中跟内容垂直居中
div里面 文字和图片水平居中
最新发布
weixin_41955606的博客
08-27 458
【代码】div里面 文字和图片水平居中。
在div容器中让图片水平、垂直居中，同时让文字于图片上方居中
weixin_60540737的博客
06-02 1333
【代码】在div容器中让图片水平、垂直居中，同时让文字于图片上方居中。
div 中元素居中的N种常用方法
u011799045的专栏
08-13 2万+
div 中元素居中的N种常用方法
文字和图片在div中居中
Koreyoshi123654的博客
12-09 426
文字和图片在div中居中
div内文字水平居中+垂直居中
11-16 385
div内文字水平居中+垂直居中
如何让图片相对于上层DIV始终保持水平、垂直都居中
09-25
2. `text-align:center`：这个属性使得Div元素内的文本水平居中，由于图片在HTML中被视为内联元素，所以这个属性也会影响到图片的水平位置。 3. `vertical-align:middle`：通常用于表格单元格，此属性使元素在垂直...
div图片垂直居中 如何使div中图片垂直居中
12-13
这个问题的关键在于处理垂直居中和图片作为置换元素的特性。 在CSS中，垂直居中可以通过多种方法实现，包括`flexbox`、`grid`布局、`position`定位等。但在旧版浏览器或特定场景下，如针对IE的兼容性，可能需要采用...
如何使div垂直水平居中的css代码
09-25
以下将详细讲解几种常用的技术来解决`div`垂直水平居中的问题。 1. **使用`margin`属性** 这是最简单且兼容性较好的方法。首先，在父级元素中设置`TEXT-ALIGN: center;`，这将使父级元素内的所有内联元素水平居中...
图片垂直居中之姊妹 DIV垂直居中
10-30
在网页设计中，让元素（如图片或`div`）在页面上垂直居中是一个常见的需求。本篇将探讨两种方法实现`div`的垂直居中，分别基于CSS的`expression`属性和使用`position: absolute`配合`margin`调整。 首先，我们来看...
大小不固定的图片、多行文字的水平垂直居中
前端岚枫
10-08 2003
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方
div内图片和文字水平垂直居中且在屏幕任意位置
Andrew_SJ的博客
08-03 1199
有这样一个需求： 要求将文字与icon作为一个盒子，盒子内文字与icon水平垂直居中，且盒子可以放在屏幕的任意位置：比如左侧或者右侧或者居中，且具有响应式的特点。 思路如下： 首先，用一个div包裹两个子div文字和icon。父盒子宽高已经指定，子盒子内其余属性设置好。 <div class="w-20 h-10 bg-blue-300 flex"> <div class="text-base text-white">联系我们</div> <img
【CSS】单行图片与文字垂直居中
热门推荐
编程记录，亲测有效
09-16 3万+
单行图片与文字垂直居中核心关键，是在img标签中的style属性加入vertical-align:middle;样式 如果不设置的话，单行图片与文字并排的话，文字默认是底部居中的。 注意如下的代码的img标签，没有设置任何的style属性， img 11111111111 222222222
div css将文字居中显示图片,CSS控制DIV文本和图片水平居中和垂直居中
weixin_42516119的博客
08-04 820
1、在div css布局中，最常见的问题就是div如何居中的问题。主要利用两个属性来使div居中：body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }首先在body内容区域内定义文本居中，这样所有在body父级元素内的内容就会居中。对于ie浏览器这样设置就可以了，但是火狐浏览器还必须加下面这句，左右...
css 如何使图片与文字在div中居中展示？
weixin_30642869的博客
03-18 424
1.情景展示 　　如何将图片与文字在div中一起居中展示？ 　　HTML片段 <div style="background: #fff;padding-top: 5px;border:1px solid red;"> <img src="C:\Users\Marydon\Desktop\head_no.jpg" style="border-radiu...
DIV内图片与文字垂直居中
felixsyan的专栏
08-13 172
  样式：   &lt;style&gt; /* tipstext * 表示了div里面所有元素,当然包含了span,input,img这些内联元素了 */ .tipstext *{vertical-align:middle;} &lt;/style&gt;   内容：   &lt;div class="tipstext "&gt; &lt;img ...
div中的文字和图片水平居中的方法
Dami103的博客
12-15 5352
css文字水平居中的案例1： .page{text-align: center;} 这是需要水平居中的文字 css文字水平居中的案例2： .page{display: flex;justify-content: center;} 这是需要水平居中的文字 css图片水平居中的案例1： css图片水平居中的案例2： .tu img{display: bloc
div中文字水平和垂直都居中
06-07
可以使用CSS样式将div中的文本内容同时水平居中对齐和垂直居中对齐，具体方法如下： 1. 设置div元素的display属性为flex，将其变为flex容器： ```css div { display: flex; justify-content: center; /* 水平居中对齐 */ align-items: center; /* 垂直居中对齐 */ } ``` 2. 将文本内容放置在div元素内部，即可实现文本内容同时水平居中对齐和垂直居中对齐： ```html <div> 文本内容 </div> ``` 注意：以上方法仅适用于已知高度的容器，如果容器高度未知，可以考虑使用JavaScript动态计算高度来实现垂直居中对齐。同时，如果div元素包含多个文本元素或其他元素，可以使用flexbox布局的子元素对齐方式来控制每个元素的对齐方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值