display: table-cell 图片居中 和 未知大小的元素居中

原创 于 2022-09-16 08:50:00 发布 · 205 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #javascript

display: table-cell 图片居中 

css样式部分:

（display: table-cell 这个方法不常用  但是还是有意想不到的效果  

          父盒子要有固定的宽   且     它不能和float   position 一起用！）

<style>
    div {
      display: table-cell;
      width: 600px;
      height: 600px;
      background-color: pink;
      text-align: center;
      vertical-align: middle;
    }

    img {
      width: 100px;
    }
  </style>

标签部分：

<body>
  <div>
    <img src="./1.webp" alt="">
  </div>
</body>

 未知大小的元素居中：

css样式部分:

(我这里虽然指定了width和height   可以当作 未知来看)

  <style>
    .box {
      position: relative;
      width: 100%;
      height: 600px;
      background-color: antiquewhite;
    }

    .child {
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background-color: aqua;
    }
  </style>

标签部分:

<body>
  <div class="box">
    <div class="child"></div>
  </div>
</body>

湖边看客
关注
实现div垂直居中的display:table-cell方法示例介绍
09-25
要实现盒模型中的div居中，可以使用display:table-cell方法且兼容多浏览器，下面有个示例，感兴趣的朋友可以练练手
display:table-cell实现兼容性的两栏自适应布局实现代码
09-25
4. 在实际应用中，`display: table-cell` 布局可能需要与 `display: table` 和 `display: table-row` 结合使用，以创建完整的表格结构。在这种情况下，`display: table` 应用于一个包含所有单元格的容器，而 `...
display:table和display:table-cell的妙用
weixin_30512089的博客
12-21 576
　　display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！ 这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居...
图片居中table-cell
amju92310的博客
09-11 211
转载于:https://www.cnblogs.com/houxiaoming/p/9627600.html
display：table-cell 居中及其使用
adtowzpo775078的博客
09-15 349
一、例子： <html> <meta charset="utf8"> <style> .Absolute-Center { display: table-cell; width: 100px; height: 100px; border:1px solid red; ...
css display:table-cell 文字、图片的垂直水平居中
茗茗
06-17 1527
文字、图片的垂直水平居中 （CSS2） inline-table：指定对象作为内联元素级的表格。类同于html标签（CSS2） table-caption：指定对象作为表格标题。类同于html标签（CSS2） table-cell：指定对象作为表格单元格。类同于html标签（CSS2） table-row：指定对象作为表格行。类同于html标签（CSS2） t
关于CSS中的display:table-cell使用技巧的几种应用
01-19
我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以...
display:table和display:table-cell实现单行，多行文本垂直居中
u011200562的博客
10-17 784
今天工作中遇到了一个问题，一个栏目的信息标题有长有短，短的一行，长的两行，但都要求垂直居中，像这样： 一般的思路就是高度等于行高，但是这个仅适用于单行文本，flex布局也只是对元素可以设置垂直居中，不作用于文本。都不适用于像这个例子的，同一位置的不同场景。经过百度的指点，终于找到了比较完美的解决方法，那就是：结合使用display:table和display:table-cell，遂速记之。 <div> <p> hello w...
利用display:table-cell让文字垂直居中（无论元素多少行）
热门推荐
xujiezi的专栏
10-27 1万+
html:<div>333333</div>css:div { display: table-cell; width: 200px; height: 200px; text-align: center; vertical-align: middle; border: 1px solid #F00; }说明： 通过display转化成为表格的形式，再采
display:table和display:table-cell的用法：使文本垂直居中
weixin_51109349的博客
02-01 625
文章出自：https://www.cnblogs.com/chen-cong/p/8076442.html display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！ 这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。.
display:table-cell的应用
weixin_33929309的博客
08-26 919
一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用 我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以dis...
CSS——布局布局神器display:table-cell
ZJH_are的博客
07-07 940
用float来做布局触发的问题比较多，例如要清除浮动，元素浮动后还会导致该元素脱离文档流，即使你清除float，该元素依旧是脱离文档流。左右布局能用布局我就用它来布局，但是还是无法完全不使用它，很多布局例如需要靠左和靠右的布局场景下就没办法不去使用float来布局。 元素两端对齐第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做： 自动平均划分每个小模块，使其一行显示 第二个案例我们先看看图：遇到上面这种布局，一般会用来做，或者把每个设置
[CSS] css中display: table-cell 实现垂直居中
程序员老狼专注开发aigc或客服系统应用
07-01 724
display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果 设置了display:cell;后，vertical-align:middle使文字内容垂直居中 例如以下用法 height: 100px; display: table-cell; vertical-a...
AOP详解
ZiYueD的博客
11-24 356
AOP详解 转载 https://blog.youkuaiyun.com/workingman_li/article/details/89484268?utm_medium=distribute.pc_relevant_t0.none-task-blog-searchFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-searchFromBaidu-1.control
CSS display: table-cell 用于水平垂直居中
weixin_30500289的博客
01-15 335
CSS display: table-cell 用于水平垂直居中 在 CSS 设置居中时候，水平和垂直居中的设置略有不同，通常我们使用 text-align:center 对图片、文字等行内元素（inline / inline-block）进行水平居中，并使用 line-height 对单行文字设置垂直居中（仅适用于单行文字）。但是，如果使用表格，则可以通过 td（单元格元素）的 ali...
Css 利用table-cell实现居中的方法
weixin_30824479的博客
04-25 406
通过display转化成为表格的形式，再采用垂直居中的方法得到垂直居中的效果。 display:table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 display:table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th> 代码示例： <div style="display: ...
使用display:table-cell 和 vertical-align:middle 不定宽高图片居中于容器
cysear的专栏
01-11 6282
.phone a{ display: table-cell;text-align: center; vertical-align: middle; width: 50px; height: 50px; border: 2px solid #d3d3d3; border-radius: 50%; } .phone a img{ vertical-align: middle;} 注
内容过长自动换行， <xsl:template match=“TableReport”> <fo:block > <fo:table text-align="left" border-collapse="collapse" letter-spacing="1px" width="100%" border-width="1pt" font-size="2.6mm"> <fo:table-column border-width="0pt" column-width="0.7cm"/> <fo:table-column border-width="0pt" column-width="0.8cm"/> <fo:table-column border-width="0pt" column-width="2.5cm"/> <fo:table-column border-width="0pt" column-width="1.5cm"/> <fo:table-column border-width="0pt" column-width="1cm"/> <fo:table-column border-width="0pt" column-width="1.6cm"/> <fo:table-column border-width="0pt" column-width="1.6cm"/> <fo:table-column border-width="0pt" column-width="3cm"/> <fo:table-column border-width="0pt" column-width="4.7cm"/> <fo:table-column border-width="0pt" column-width="0.8cm"/> <fo:table-column border-width="0pt" column-width="1.1cm"/> <fo:table-header> <fo:table-row height="5mm"> <fo:table-cell xsl:use-attribute-sets="border-cell-left-style"> <fo:block text-align="center">序号</fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-left-style"> <fo:block text-align="center">组织</fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-left-style"> <fo:block text-align="center">申请单号</fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-left-style"> <fo:block text-align="center">类型</fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-left-style"> <fo:block text-align="center">状态</fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style"> <fo:block text-align="center">工号</fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style"> <fo:block text-align="center">姓名</fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style"> <fo:block text-align="center">物料编码</fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style"> <fo:block text-align="center">物料描述</fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style"> <fo:block text-align="center">销数</fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style"> <fo:block text-align="center">原数量</fo:block> </fo:table-cell> </fo:table-row> </fo:table-header> <!--表明细--> <fo:table-body> <xsl:apply-templates select="TableRow"/> </fo:table-body> </fo:table> </fo:block> <fo:block id="end"/> </xsl:template> <xsl:template match="TableRow"> <fo:table-row height="5mm"> <fo:table-cell xsl:use-attribute-sets="border-cell-left-style"> <fo:block><xsl:value-of select="no"/></fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-left-style"> <fo:block><xsl:value-of select="orgCode"/></fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-left-style" font-size="2.2mm"> <fo:block><xsl:value-of select="requestNo"/></fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-left-style"> <fo:block><xsl:value-of select="noteType"/></fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-left-style"> <fo:block><xsl:value-of select="state"/></fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style"> <fo:block><xsl:value-of select="empNo"/></fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style" font-size="2.2mm"> <fo:block><xsl:value-of select="empName"/></fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style" font-size="2.2mm"> <fo:block><xsl:value-of select="itemCode"/></fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style" font-size="2.2mm"> <fo:block wrap-option="wrap" language="zh"><xsl:value-of select="itemDesc"/></fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style" font-size="2.2mm"> <fo:block wrap-option="wrap" language="zh"><xsl:value-of select="qty"/></fo:block> </fo:table-cell> <fo:table-cell xsl:use-attribute-sets="border-cell-style"> <fo:block><xsl:value-of select="holdQty"/></fo:block> </fo:table-cell> </fo:table-row> </xsl:template>
最新发布
08-02
对于包含长文本的列，可以设置`display-align="center"`来垂直居中（可选）。 3. 考虑设置块（block）的宽度为100%，这样块会填充整个单元格，换行会基于单元格的宽度。 修改建议： 对于可能包含长文本的列...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值