IE11在网格居中时忽略项目内容的绝对宽度

是指在使用CSS网格布局时，IE11浏览器在某些情况下无法正确处理项目内容的绝对宽度，导致项目内容无法居中显示。

CSS网格布局是一种强大的布局方式，可以将页面划分为行和列，通过定义网格容器和网格项目来实现灵活的布局。然而，IE11对CSS网格布局的支持存在一些限制和兼容性问题。

在IE11中，当使用网格布局并将项目内容的绝对宽度设置为固定值时，例如使用width: 100px;，项目内容在居中对齐时会被忽略，导致内容不居中显示。这是因为IE11在计算项目的位置时没有正确考虑项目内容的绝对宽度。

解决这个问题的方法是使用其他方式来实现居中对齐，例如使用自动布局或使用其他CSS属性来控制项目的位置。可以使用justify-self: center;和align-self: center;属性来实现水平和垂直居中对齐。

腾讯云相关产品中，可以使用云服务器（CVM）来搭建网站和应用程序，通过自定义的CSS样式来解决IE11在网格居中时忽略项目内容的绝对宽度的问题。腾讯云云服务器（CVM）是一种灵活可扩展的云计算产品，提供稳定可靠的计算能力，适用于各种规模的业务需求。

腾讯云云服务器（CVM）产品介绍链接地址：https://cloud.tencent.com/product/cvm

相关·内容

CSS 中你需要知道 auto 的一切！

这使元素相对于包含块的边缘水平居中。 ? 具有绝对定位元素的 margin:auto ? 另一个不太常见的将绝对定位元素居中的用例是margin: auto。...当我们有一个元素应该在它的父元素内部水平和垂直居中时，我们可能会倾向于使用translateX或translateY。我们可以使用下面方法让具有绝对定位元素居中：设置的宽度和高度。...在CSS Grid中，我们可以设置一个列为auto，这意味着它的宽度将基于它的内容长度。...当我们有一个网格，并且其中的网格项目具有margin-left: auto时：该项目将被推到右边，其宽度将基于其内容长度考虑下面的例子： ? 当我们希望item1的宽度基于其内容，而不是网格区域。...接下来我要解释的是对我来说是新的，我在研究本文时学到了它。考虑下面的模型: ? 我们有一个有内边距的 wrapper 元素，还有一个子项。子项目是绝对定位的，但没有任何定位属性。

5.1K3 0

HarmonyOS应用开发-低代码开发登录页

操作：在列容器(Cloumn)里拖一个行容器(Row)过去，宽度(width)设置为 100%，高度(height)设置为 100vp，设置水平居中、垂直居中，位置为绝对定位(Position)，距离页面上方...定义组件的属性：设置组件宽度(Width)为 90%，高度(Height)为 40vp；内容为”登录”，字体默认居中，字体大小为 20fp；组件位置为绝对定位(Position)，距离左侧为 5%...操作流程：首先，我们拖一个网格组件(Grid)，设置组件属性：组件宽度(width)设置为 100%，高度(height)设置为 10%；内容居中，绝对定位，距离顶部 90%；往网格组件(Guid...)里拖一个GuidItem组件，这是一个动态显示的子元素组件，会根据我们提供的参数动态进行内容显示，由于我们在设计上固定为行内显示3个，所以宽度就直接定为33.3%了。...文字(Text)组件：文字内容(Content)，我们先随便填个 “测试”；文本居中；组件宽度(width)设置为 100%，高度(height)设置为 24%；绝对定位，距离顶部 60%(60%

2741 0

多个你不知道的 CSS 居中方案！

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。水平居中内联元素要使内联元素（如链接，span 或img）居中，使用 text-align: center 足够了。...： .desk { display: flex; justify-content: center; } 对于多个内联的项目，也可以正常工作： image.png CSS Grid 使用网格容器时...，图中的盘子将根据其网格区域居中。...在已知元素宽度的情况下，可以使用负边距代替CSS transform。....plate { position: absolute; top: 50%; margin-top: -60px; } CSS Grid 使用CSS网格，我们可以使用align-items将项目垂直于其网格区域居中

1.3K3 0

多个CSS 居中方案，你可能还不知道！水平居中垂直居中水平垂直居中

Flexbox 使用 flexbox 也可以快速居中元素： .desk { display: flex; justify-content: center; } 对于多个内联的项目，也可以正常工作...： image.png CSS Grid 使用网格容器时，图中的盘子将根据其网格区域居中。...CSS定位通过绝对定位，我们可以轻松地通过CSS transform将其水平居中。....plate { position: absolute; left: 50%; transform: translateX(-50%); } image.png 在已知元素宽度的情况下，....plate { position: absolute; top: 50%; margin-top: -60px; } CSS Grid 使用CSS网格，我们可以使用align-items将项目垂直于其网格区域居中

2.9K4 0

一文掌握css常见布局float、position、flex、grid

，但是跟绝对定位区别的一点是，该元素边产生了浮动流，以至于其相邻的元素会向右或者想左靠近该元素，而不是跟绝对定位一样，相邻的元素会忽略该元素的所在位置，直接铺满整个空间。...定义了项目在纵坐标的对其方式，主要用于当项目的高度不一致的时候如何显示，有以下几个值：flex-start: 顶部对齐flex-end：顶部对齐center：居中对齐baseline：项目的第一行文字基线对齐...项目属性 order该属性定义了项目的显示顺序，数值越小，排列越靠前，默认值为0，其实这个属性在项目初始展示的时候作用不大，还不如使用项目原始的显示顺序来显示，但是在需要动态调整项目的显示顺序的场景下比较有用...item的宽度项目属性 flex-grow定义了剩余空间如何利用，常用来当固定宽度的几个元素没有占满整个容器，然后剩余的宽度都由一个元素占满。...grid [网格]前面的flex布局主要针对一维布局，grid主要针对二维布局，也叫网格布局。

1211 0

CSS中各种布局的背后(*FC)

- 浮动(Floats) 在浮动模型中，盒首先根据常规流布局，然后从常规流中脱离并尽可能地向左或向右位移。内容可以布局在浮动周围。...- 绝对定位(Absolute positioning) 在绝对定位模型中，盒完全从常规流中脱离（对后面的同胞元素无影响）并根据包含块来分配位置。...当一个 inline box 超过 line box 的宽度时，它会被分割成多个boxes，这些 boxes 被分布在多个 line box 里。...应用场景水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过设置父容器 text-align:center 则可以使其水平居中。...item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

2.1K5 0

WEB 常用页面布局梳理和分析

还有一点是，这个是在定高的情况下，如果内容溢出或者不定高的话，float 也会有内容偏移的情况也要做一些处理。...使用绝对定位方法使用绝对定位的方就是将三个容器都定为绝对定位，左右侧 DIV 绝对定位且定宽，中间距离等于左侧宽度和右侧宽度。...使用网格布局这个可能有点兼容性问题，但也是可以慢慢尝试去使用，现在在项目上一般情况下也没有使用到这个方法。但这个方法用起来确实是很方便，几行代码就可以搞定。...，只是在高度上建议是使用 min-height，避免有些小机型展示会有问题，但现在基本上可以忽略了。...（不定高）不定高度在一段时间的前端面试中，那个是逢面必问的题目。

1.2K11 3

前端主流布局方法

padding和border再加上设置的宽高一起决定整个盒子的大小。在怪异模型中，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。如何将标准盒模型转化为怪异盒模型？...div在默认情况下是块状元素，即display: block，对于块状元素，当不设置width时，其默认值为100%，也就是等于父元素的宽度。...绝对定位绝对定位的元素脱离了正常的文档流，绝对定位元素不占据文档流空间；与使用了float属性的div相似，具备了内联盒子的特性——在不设置width属性的时候，宽度由内容决定；同样，当内联盒子使用了绝对定位...Expand / 拓展绝对定位元素相对于最近的非static祖元素定位，当这样的祖元素不存在时，则相对于可视区域定位。...利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。

2.1K3 0

前端系列第3集-如何理解css盒子型?

可以使用CSS的flex布局或者绝对定位的方式来垂直居中一个盒子。...可以使用CSS的flex布局或者绝对定位的方式来垂直居中一个盒子。...可以使用CSS的绝对定位和负边距的方式来实现一个盒子在页面中居中。...CSS盒子模型计算盒子宽度和高度时，默认情况下是包括了所有这些部分的大小。可以通过box-sizing属性来改变盒子的盒模型，让它只包括内容区域和内边距的大小，或者只包括内容区域的大小。...768px时，项目的宽度将变为100%。

2171 0

17个场景，带你入门CSS布局

当 box-sizing 设置为 border-box 时，所占水平空间 = width值，内容宽度 = width值 - 左右padding值 - 左右边框宽度值。...值大于0时，就会撑满父元素宽度的剩余部分。...bottom: 100px; } 场景15 绝对定位元素的水平居中用left和transform可以实现绝对定位元素的水平居中。...绝对定位元素水平居中时，距定位元素左侧的值为 50%*定位元素宽度 - 50%*元素宽度。...用top和transform实现绝对定位元素的垂直居中。

2.5K2 0

CSS进阶03-定位体系，格式化上下文，常规流

1.7K1 0

【CSS】最强大的布局之grid布局精讲

行和列整个grid页面布局是由行和列构成的，在使用grid布局时，需要单独设计行和列。 ...单元格每行每列都会分布单元格，在单元格内我们可以添加想要的内容。网格线格子的边框为网格线，分为上下网格线和左右网格线。...除了设置绝对值之外，也能设置百分比数（根据父级大小的百分比）等。...end - 对齐容器的结束边框。 center - 容器内部居中。 stretch - 项目大小没有指定时，拉伸占据整个网格容器 space-around - 每个项目两侧的间隔相等。...，在100px*100px内的方格内水平垂直居中，整个网格也水平居中在了页面中，如果不设置红色方块大小的话里面的文字将会水平垂直居中。

2.8K2 1

每天10个前端小知识【Day 17】

注意：当元素设置为绝对定位时，在没有指定top，bottom，left，right的值时，他们的值并不是0，这几个值是有默认值的，默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。...当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...stretch - 项目大小没有指定时，拉伸占据整个网格容器 grid-auto-columns 属性和 grid-auto-rows 属性有时候，一些项目的指定位置，在现有网格的外部，就会产生显示网格和隐式网格...stretch：拉伸，占满单元格的整个宽度（默认值）应用场景文章开头就讲到，Grid是一个强大的布局，如一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的，在以前的文章中，也有使用

1211 1

【CSS】1287- 一行 CSS 实现 10 种强大的布局

.parent { display: grid; place-items: center; } 这使得内容能够在父级内完美居中，而不管内部大小。 02....在第一列（在这种情况下，侧边栏）的项目其 minmax 为 150px（在25% ），第二列项目（这里指 main 部分）占据其余的空间作为单一的 1fr 轨道。...这些子元素的基本最小值为 150px ，最大值为 1fr ，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度，当它们达到 150px 宽度时，它们将开始流到同一条线上。...在本演示中，您将使用固定工具设置宽度，如下所示：width: clamp(, , ) 。这将设置绝对最小和最大尺寸以及实际尺寸。...您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。

4.6K2 0

CSS 基础系列：从清除浮动和margin塌陷问题谈BFC

如果父元素的宽度足以包含这两个子元素的宽度之和，则子兄弟元素和子浮动元素并排。如图： image.png 如果父元素的宽度不足以包含这两个子元素的宽度之和，则子兄弟元素会出现在子浮动元素的下面。...水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。...垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。...rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid...在 CSS2.1 中，有三种定位方案 ———— 普通流、浮动和绝对定位，下面分别对这三种布局简略说明一下：普通流(Normal flow) 在普通流中，盒一个接着一个排列; 在块级格式化上下文里面，它们竖着排列

2.3K1 0

css实现布局垂直居中以及@media的用法总结

描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。...没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。...到此垂直居中已实现不同的设备访问网页效果却不同这是使用了@media width:浏览器可视宽度。 height:浏览器可视高度。 device-width:设备屏幕的宽度。...grid:检测输出的设备是网格的还是位图设备。跳转链接 css中的@media用法总结

4484 0

前端：水平垂直居中的10种方法

第一种：通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高，给子元素设置top：50%；left：50%，但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示...借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了优点：比较好理解，兼容性好缺点：需要知道子元素的宽高 ---- 第二种...--- 第三种： absolute + calc（计算）这种方法top的百分比是基于元素的左上角，那么在减去宽度与高度的一半就好了 calc :任何长度值都可以使用calc()函数进行计算； calc...所以在文本水平垂直居中时使用。...---- 第七种： table 形式通过table单元格的形式设优点： tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了缺点：这个不是table的正确方法，不是很建议使用

8591 0

react-native 之布局总结

宽度单位和像素密度 flex的布局图片布局绝对定位和相对定位 padding和margin的区别和应用场合文本元素宽度单位和像素密度我们知道在Android中是用设备像素来作为单位的（后面又出现了百分比这么...我们知道一个div如果不设置宽度，默认的会占用100%的宽度，为了验证100%这个问题，做三个实验：根节点上方一个View，不设置宽度固定宽度的元素上设置一个View，不设置宽度 flex...网格布局通常页面不是很复杂的时候，我们可以使用flex布局等分做到网格，复杂的那么就要用ListView实现，或者第三方控件。...那我们就来实验一下padding和margin在inline和非inline元素上的padding和margin的使用情况。...基于flex的布局： view默认宽度为100% 水平居中用alignItems, 垂直居中用justifyContent 基于flex能够实现现有的网格系统需求，且网格能够各种嵌套无bug

3.2K8 0

水平垂直居中深入挖掘

也就是：那么多种水平垂直居中的方式，如果真的在业务中需要使用了，你脑海里第一时间会想到哪个？不同的水平垂直居中方式，它们肯定存在差异，那么最显著的不同是什么？有没有所谓的最完美的水平垂直居中？...，如果不手动添加边距(margin 或者 gap)，会贴在一起不限制方向的话，flex 默认是水平排列，grid 是竖直排列非常重要的一点，grid 布局下的子元素的宽度，所有子元素的宽度会被强行拉伸至最宽的一个子元素的内容的宽度...（也就是拉伸至网格宽度）对于多个子元素，absolute 方法明显不适用，接下来主要看剩余 3 个方法在一些细节上的差异。...另外一边溢出 flex 和 grid 都做到了即便超出容器空间，依然是水平垂直居中的总结一下经由上述几个 DEMO 可以看出来，在目前比较常用的水平垂直居中方案当中。...flex 方案应该是目前而言最优的选择，它能够在各种环境下都保持内部元素的水平垂直居中并且不改变子元素的某些特征：便捷的水平垂直居中单个元素便捷的水平垂直居中多个元素，无论是横向、竖向，亦或内容超出

9782 0

【面试题解】CSS布局，定位布局，浮动布局，BFC,IFC,FFC,GFC

line boxes 的高度取决于 line-height。通过 line-height 可以设置单行文本的垂直居中。...盒子本身的布局盒子由内容(content)、内边距(padding)、边框(border)、外边距(margin)构成。盒模型有两种标准，一个是标准盒模型，一个是 IE 盒模型。...绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的，另外，绝对定位的元素会自动忽略有定位属性的祖先元素的 padding 属性。...；当 IFC 中盒子的总宽度少于包含它们的行框时，其水平渲染规则由 text-align 属性值来决定；当一个行内元素超过父元素的宽度时，它会被分割成多个盒子，这些盒子分布在多个行框中。...表格布局上下文随着各种技术的不断发展，table 布局已经逐渐退出了历史的舞台，但是因为 table 本身的一些特性，比如上下对齐，左右对齐，文字默认居中使得 table 在曾经的布局中占有一席地位。

1.5K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云