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

于 2022-09-16 08:50:00 发布
阅读量134 收藏
点赞数 1
文章标签： table-cell 元素居中 position margin CSS布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VVVVV16/article/details/126883314
版权

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； vertical-align: middle；
u010782109的博客
06-30 205
div中的内容垂直居中 display: table-cell;vertical-align: middle;
实现div垂直居中的display:table-cell方法示例介绍
09-25
要实现盒模型中的div居中，可以使用display:table-cell方法且兼容多浏览器，下面有个示例，感兴趣的朋友可以练练手
display:table和display:table-cell的妙用
weixin_30512089的博客
12-21 512
　　display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！ 这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居...
图片居中table-cell
amju92310的博客
09-11 169
转载于:https://www.cnblogs.com/houxiaoming/p/9627600.html
display：table-cell 居中及其使用
adtowzpo775078的博客
09-15 300
一、例子： <html> <meta charset="utf8"> <style> .Absolute-Center { display: table-cell; width: 100px; height: 100px; border:1px solid red; ...
css display:table-cell 文字、图片的垂直水平居中
茗茗
06-17 1437
文字、图片的垂直水平居中 （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-cell实现兼容性的两栏自适应布局实现代码
09-25
4. 在实际应用中，`display: table-cell` 布局可能需要与 `display: table` 和 `display: table-row` 结合使用，以创建完整的表格结构。在这种情况下，`display: table` 应用于一个包含所有单元格的容器，而 `...
display:table和display:table-cell实现单行，多行文本垂直居中
u011200562的博客
10-17 609
今天工作中遇到了一个问题，一个栏目的信息标题有长有短，短的一行，长的两行，但都要求垂直居中，像这样： 一般的思路就是高度等于行高，但是这个仅适用于单行文本，flex布局也只是对元素可以设置垂直居中，不作用于文本。都不适用于像这个例子的，同一位置的不同场景。经过百度的指点，终于找到了比较完美的解决方法，那就是：结合使用display:table和display:table-cell，遂速记之。 <div> <p> hello w...
display:table-cell的应用
weixin_33929309的博客
08-26 814
一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用 我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以dis...
CSS——布局布局神器display:table-cell
ZJH_are的博客
07-07 729
用float来做布局触发的问题比较多，例如要清除浮动，元素浮动后还会导致该元素脱离文档流，即使你清除float，该元素依旧是脱离文档流。左右布局能用布局我就用它来布局，但是还是无法完全不使用它，很多布局例如需要靠左和靠右的布局场景下就没办法不去使用float来布局。 元素两端对齐第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做： 自动平均划分每个小模块，使其一行显示 第二个案例我们先看看图：遇到上面这种布局，一般会用来做，或者把每个设置
Css 利用table-cell实现居中的方法
weixin_30824479的博客
04-25 358
通过display转化成为表格的形式，再采用垂直居中的方法得到垂直居中的效果。 display:table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 display:table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th> 代码示例： <div style="display: ...
使用display:table-cell 和 vertical-align:middle 不定宽高图片居中于容器
cysear的专栏
01-11 6224
.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;} 注
[CSS] css中display: table-cell 实现垂直居中
程序员老狼专注开发aigc或客服系统应用
07-01 634
display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果 设置了display:cell;后，vertical-align:middle使文字内容垂直居中 例如以下用法 height: 100px; display: table-cell; vertical-a...
AOP详解
ZiYueD的博客
11-24 285
AOP详解 转载 https://blog.csdn.net/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
display:table和display:table-cell的用法：使文本垂直居中
weixin_51109349的博客
02-01 535
文章出自：https://www.cnblogs.com/chen-cong/p/8076442.html display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！ 这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。.
display:table图文垂直居中布局
FEE
11-30 1817
在日常布局当中，碰到需要图文左右两列，垂直居中的情况，即在文字内容高度大于图片高度时，图片相对文字垂直居中，反之，则文字相对图片垂直居中。 对于响应式布局，由于图文字高度的变化，所以要避免出现文字或图片被遮挡住的情况，那么就要设定一定大小的上下padding值。 初次尝试，定义左右浮动，此时display:table-cell布局失效。那要让文字垂直居中，首先想到的是定位：position: a
display: table-cell;怎样设置垂直居中
最新发布
05-27
要将元素垂直居中，您可以使用以下 CSS 属性组合： ...请注意，这将仅适用于具有 `display: table` 或 `display: table-cell` 属性的元素。如果您想将其他元素垂直居中，可以考虑使用 Flexbox 或 Grid 布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值