首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML CSS - display: inline-block无法居中宽度为%的容器

问题描述: 在HTML和CSS中,当使用display: inline-block属性时,宽度为百分比(%)的容器无法居中。

解决方案: 要解决这个问题,可以使用以下方法之一:

  1. 使用text-align: center属性: 在容器的父元素上添加text-align: center属性,然后将容器的display属性设置为inline-block。这样可以使容器水平居中。
  2. 示例代码:
  3. 示例代码:
  4. 使用margin属性: 在容器的父元素上添加text-align: center属性,然后将容器的display属性设置为inline-block。接下来,使用margin属性设置左右边距为auto。这样可以使容器水平居中。
  5. 示例代码:
  6. 示例代码:

以上两种方法都可以实现将宽度为百分比的inline-block容器水平居中。

推荐的腾讯云相关产品和产品介绍链接地址: 腾讯云提供了丰富的云计算产品和服务,其中包括云服务器、云数据库、云存储等。您可以通过以下链接了解更多信息:

  1. 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm 腾讯云云服务器(CVM)是一种弹性计算服务,提供可扩展的计算能力,适用于各种应用场景。
  2. 腾讯云云数据库MySQL版:https://cloud.tencent.com/product/cdb_mysql 腾讯云云数据库MySQL版是一种高性能、可扩展的关系型数据库服务,适用于各种规模的应用。
  3. 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos 腾讯云对象存储(COS)是一种安全、稳定、高可用的云存储服务,适用于存储和处理各种类型的数据。

请注意,以上链接仅供参考,您可以根据具体需求选择适合的腾讯云产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

高度不固定图片、多行文字水平垂直居中

本文综述 想必写css都知道如何让单行文字在高度固定容器内垂直居中,但是您知道或者想过让行数不固定文字在高度固定容器内垂直居中呢?本文将会告诉你如何实现多行文字垂直居中显示。...核心HTML代码: <img src=".....简单<em>的</em>超乎想象。 要显示<em>的</em>图片后面跟了一个高度撑满<em>容器</em>,只有1px宽,<em>宽度</em><em>为</em>0即可,透明<em>的</em>图片。...这两个图片分别vertical-align:middle,就实现了要显示<em>的</em>图片与这个拉伸<em>的</em>透明图片<em>的</em><em>居中</em>对齐了,由于透明图片是透明<em>的</em>,不可见<em>的</em>,<em>宽度</em>也只有1像素<em>宽度</em>也<em>为</em>0,所以看上去就是要显示<em>的</em>图片相对于<em>容器</em>垂直<em>居中</em>了...另外,其实这里不一定是透明<em>的</em>图片,使用任意<em>的</em>图片都可以,所以您其实说不定可以减少一次http请求,使用任意<em>的</em>图片将其拉伸至高度<em>为</em><em>容器</em>高,<em>宽度</em>1像素<em>宽度</em>0就可以了。

3K20
  • div内图片和文字水平垂直居中「建议收藏」

    透明图片和背景定位实现图片水平垂直居中 核心HTML代码: <img src=".....需要注意<em>的</em>: 1.img外<em>容器</em><em>宽度</em>要大于要显示<em>的</em>图片<em>的</em>最大<em>宽度</em>+1像素; 2.img外<em>容器</em><em>的</em>字体大小设为0px,也可以不设,但是两个img标签要连着写,避免空格; 以下是核心<em>的</em>一些代码: <em>HTML</em>...简单<em>的</em>超乎想象。 要显示<em>的</em>图片后面跟了一个高度撑满<em>容器</em>,只有1px宽,<em>宽度</em><em>为</em>0即可,透明<em>的</em>图片。...这两个图片分别vertical-align:middle,就实现了要显示<em>的</em>图片与这个拉伸<em>的</em>透明图片<em>的</em><em>居中</em>对齐了,由于透明图片是透明<em>的</em>,不可见<em>的</em>,<em>宽度</em>也只有1像素<em>宽度</em>也<em>为</em>0,所以看上去就是要显示<em>的</em>图片相对于<em>容器</em>垂直<em>居中</em>了...另外,其实这里不一定是透明<em>的</em>图片,使用任意<em>的</em>图片都可以,所以您其实说不定可以减少一次http请求,使用任意<em>的</em>图片将其拉伸至高度<em>为</em><em>容器</em>高,<em>宽度</em>1像素<em>宽度</em>0就可以了。

    3.6K21

    建议收藏!总结了42种前端常用布局方案

    使用text-align属性 若元素行内块级元素,也就是 display: inline-block 元素,可以通过为其父元素设置t ext-align: center 实现水平居中。...实现CSS代码如下: .parent { /* 对于子级 display: inline-block; 可以通过 text-align: center; 实现水平居中 */ text-align...定位实现水平垂直居中方案(一) 步骤如下: 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素偏移量,值50% 减去宽度/高度一半 实现CSS代码如下: .parent { /* 1....右列容器开启右浮动 使中间自适应宽度父级容器减去两个定宽列 实现CSS代码如下: .left { /* 1....25会超出容器 */ display: inline-block; } 3.

    4.2K30

    建议收藏!总结了 42 种前端常用布局方案

    使用text-align属性 若元素行内块级元素,也就是 display: inline-block 元素,可以通过为其父元素设置t ext-align: center 实现水平居中。...实现CSS代码如下: .parent { /* 对于子级 display: inline-block; 可以通过 text-align: center; 实现水平居中 */ text-align...定位实现水平垂直居中方案(一) 步骤如下: 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素偏移量,值50% 减去宽度/高度一半 实现CSS代码如下: .parent { /* 1....右列容器开启右浮动 使中间自适应宽度父级容器减去两个定宽列 实现CSS代码如下: .left { /* 1....25会超出容器 */ display: inline-block; } 3.

    4.2K30

    CSS十问之元素居中

    - 「情感化认知」 - 「具象化思维」 ❞ 同样,无论是针对前端Js/Css/Html/Vue/React/Webpack/Vite还是一些新语言Rust想必都有一些你不熟悉或者模棱两可知识概念和体系...简明扼要 块级元素和displayblock元素不是一个概念 对于「非替换」元素,当left/right或top/bottom,「对立方位」属性值「同时存在」时候,元素宽度表现为「格式化宽度」...这里有一个点,需要大家厘清: ❝块级元素和displayblock元素不是一个概念 ❞ 例如: 元素默认display值是list-item 元素默认display值是table..., block: 外在盒子: 块级盒子;内在盒子:块级容器盒子 inline-block:外在盒子:内联盒子;内在盒子:块级容器盒子 inline:外在盒子:内联盒子;内在盒子:内联盒子 既然有了前面的针对元素内...我们继续来解释下,首先,块级元素定宽,也就是说该元素「流动性」消失了,不会100%于父级元素宽度了。换言之,就是该元素在水平方向无法将父元素填充满。

    1.7K10

    CSS居中:完全指南(译)

    CSS居中是众多CSS难点代表。为啥用CSS居中这么难呢?但是我认为这个问题其实并没有那么难啦,就是有很多种不同方式可以达到居中目的,这取决于不同情景,很难说用哪一种方式去实现居中。...你可以设置块级元素 margin-left 和 margin-right auto 来使它水平居中(这个块级元素是被设置了一个 width 属性了,否则它会占满宽度,这时候已经不需要居中了),有一种速记写法...这里有两个例子:一个是设置 inline-block, 一个是设置 flexbox 。...用负 margin 值使其等于宽度和高度一半,当你设置了它绝对位置 50% 之后,就会得到一个很棒跨浏览器支持居中CSS; 123456789101112131415 .parent...如果你不知道元素高度和宽度,你可以用 transform 属性,用 translate 设置 -50%(它以元素当前宽和高基础)来居中CSS: 123456789 .parent {position

    1.7K70

    剖析一些经典CSS布局问题,前端开发+面试保驾护航

    inline-block实现水平居中方法。displayinline-block和text-align:center实现水平居中。...flex中,这种方法适合纯文字类 通过设置父容器 相对定位,子级设置 绝对定位,标签通过margin实现自适应居中 弹性布局 flex:父级设置display: flex; 子级设置marginauto...;还有一个就是inline-block在使用时有时会有空白间隙问题 缺点 最明显缺点就是浮动元素一旦脱离了文档流,就无法撑起父元素,会造成父级元素高度塌陷。... absolute 或 fixed) 行内块元素(元素 display inline-block) 表格单元格(元素 display table-cell,HTML表格单元格默认为该值)...表格标题(元素 display table-caption,HTML表格标题默认为该值) 匿名表格单元格元素(元素 display table、table-row、 table-row-group

    1.1K20

    web前端开发初学者十问集锦(2)

    在W3Cschool中查看CSS display属性时候,发现display有一个取值inline-block,其作用是将元素设置行内块元素。...行内块框:由CSS display属性设置inline-block行内块元素形成框称为行内块框,又叫作行内块级框。 5.html中什么是替换元素,什么是非替换元素?...这样的话就可以对浮动后行内元素应用高和宽属性了。可参见:CSS float 属性。 浮动元素生成块级框,其宽度不会默认扩展至其父容器,而是默认为其包含元素宽度。...-- html代码 --> 8.margin:0 auto;无法使div水平居中 再使元素进行居中时候,我们要清楚需要居中元素类型,对症下药。...就是增加一个wrapper,包裹浮动元素,并将wrapper设置display:inline-block;然后对wrapper父元素应用text-align:center;这里wrapper一般使用

    1.4K10

    HtmlCSS布局技巧(转)

    单列布局 水平居中 水平居中页面布局中最为常见一种布局形式,多出现于标题,以及内容区域组织形式,下面介绍四种实现水平居中方法(注:下面各个实例中实现是child元素对齐操作,child元素容器是...relative;} /*或者实用margin-left负值盒子宽度一半也可以实现,不过这样就必须知道盒子宽度,但兼容性好*/ .child{position:absolute;left:50%...;} .left{width:100px;} .right{flex:1;} 利用右侧容器flex:1,均分了剩余宽度,也实现了同样效果。...;} 实用flex实现 .parent{display:flex;} .left{flex:1;} .right{width:100px;} 两列定宽,一列自适应 基本html结构容器parent... 媒体查询 HTML 4和CSS 2目前支持不同媒体类型设定专有的样式表

    4.8K20

    【基础】这15种CSS居中方式,你都用过哪几种?

    简言 CSS居中是前端工程师经常要面对问题,也是基本技能之一。今天有时间把CSS居中方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。...,通过设置块级元素显示类型inline-block和父容器text-align属性从而使多块级元素水平居中。...固定高度块级元素 我们知道居中元素高度和宽度,垂直居中问题就很简单。...当垂直居中元素高度和宽度未知时,我们可以借助CSS3中transform属性向Y轴反向偏移50%方法实现垂直居中。...3.1 固定宽高元素水平垂直居中 通过margin平移元素整体宽度一半,使元素水平垂直居中

    2.1K70

    前端常用布局方案总结

    定位实现水平垂直居中方案(方法一) 步骤如下: (1). 使子元素相对于容器元素定位; (2). 子元素开启绝对定位; (3). 设置该元素偏移量,值50% 减去宽度/高度一半。...右边列宽度父级 100%减去左列宽度。...左列容器开启左浮动; (3). 右列容器开启右浮动; (4). 使中间自适应宽度父级容器减去两个定宽列。...左右两列脱离文档流,并通过偏移方式到达自己区域; (2). 使中间自适应宽度父级容器减去两个定宽列; (3). 通过外边距将容器往内缩小。...实现CSS代码如下: /* 设置最外层容器100% */ html, body { height: 100%; margin: 0; } /* 让子元素元素相对于容器元素进行定位,

    2.7K30

    【前端攻略】最全面的水平垂直居中方案与flexbox布局

    最近又遇到许多垂直居中问题,这是Css布局当中十分常见一个问题,诸如定长定宽或不定长宽各类容器垂直居中,其实都有很多种解决方案。...Demo 多个块状元素水平居中     要实现多个水平排列块状元素水平居中,传统方法是将要水平排列块状元素设为display:inline-block,然后在父级元素上设置text-align...通过设置元素display属性flex或者inline-flex可以得到一个伸缩容器。设置flex容器被渲染一个块级元素,而设置inline-flex容器则渲染一个行内元素。...回到正题,利用flexbox实现多块状元素水平居中,只需要将父级容器Css设置如下: #container{ justify-content:center; display:flex...当要被居中元素是inline或者inline-block元素 当要被居中元素是inline或者inline-block时候,可以巧妙将父级容器设置display:table-cell,配合text-align

    1.4K40

    CSS&HTML面经专题——(三)CSS定位盒模型经典布局浮动布局与BFC

    ---- center 与absolute一致,但偏移定位是以定位祖先元素中心点参考。盒子在其包含容器垂直水平居中。(CSS3) page 与absolute一致。...使用table标签(或直接将块级元素设值display:table),再通过给该标签添加左右marginauto。 inline-block实现水平居中方法。...> 复制代码 5、布局题:div垂直居中,左右10px,高度始终宽度一半 子题目:(较简单)纯CSS实现一个长宽比始终2:1长方形。...浮动元素(元素float不是none) 绝对定位元素(元素positionabsolute或fixed) 行内块元素(元素displayinline-block) 表格单元格(元素display...table-cell, HTML表格单元格默认为该值) 表格标题(元素displaytable-caption,HTML表格标题默认为该值) 匿名表格单元格元素(元素displaytable、

    2K31

    前端面试之CSS重点概念精讲

    负责元素是可以一行显示,还是只能换行显示 「内在盒子」 负责宽高、内容呈现 ❞ 按照display属性值不同 block 外在盒子:块级盒子 内在盒子:块级容器盒子 inline-block 外在盒子...也就是说替换元素宽度却不受display水平影响 而/就是替换元素,修改displayblock是无法让尺寸100%自适应父容器。...,同时不渲染 display:none 其他特点:辅助设备无法访问,「资源加载,DOM可访问...「隔离独立容器」,容器里面的子元素不会影响到外面的元素,反之亦然 触发条件 (5个) 「根元素」,即HTML元素 「浮动元素」:float值left、right overflow值不为 visible..., auto、scroll、hidden displayinline-block、table、inline-table、flex、inline-flex、grid、inline-grid position

    2.4K30

    第212天:15种CSS居中方式,最全了

    CSS居中是前端工程师经常要面对问题,也是基本技能之一。今天有时间把CSS居中方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。...,通过设置块级元素显示类型inline-block和父容器text-align属性从而使多块级元素水平居中。...2.3 块级元素垂直居中 2.3.1 固定高度块级元素 我们知道居中元素高度和宽度,垂直居中问题就很简单。...当垂直居中元素高度和宽度未知时,我们可以借助CSS3中transform属性向Y轴反向偏移50%方法实现垂直居中。...3.1 固定宽高元素水平垂直居中 通过margin平移元素整体宽度一半,使元素水平垂直居中

    60310
    领券