CSS中不定宽块状元素的水平居中显示

最新推荐文章于 2020-12-23 18:40:15 发布

moluchase

最新推荐文章于 2020-12-23 18:40:15 发布

阅读量7k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/molu_chase/article/details/52175985

版权

本文介绍了在CSS中如何使不定宽的块状元素水平居中，详细讲解了通过table标签、浮动和相对定位相结合的方法。通过实例代码分析，解释了父元素设置float、position及left属性，以及子元素相应设置来实现居中的原理。同时，探讨了float属性对元素布局的影响，以及如何将块状元素转换为内联块状元素。

摘要由CSDN通过智能技术生成

慕课网上的HTML/CSS教程

http://www.imooc.com/view/9

其中有三种方法

第一种是加入table标签

任务是实现div元素的水平居中，

初始代码如下

<div>
  设置我所在的div容器水平居中  
</div>

使用table标签实现的代码如下

<table>
 <tbody>
   <tr><td><div>
  设置我所在的div容器水平居中  
</div>
</td></tr>
 </tbody>
</table>

第二种方法是将其设置为内联元素，通过父类来修改

即

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

moluchase

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

web前端入门到实战：行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

前端工程师年薪30万，就靠这套教程！持续更新最新知识

04-12

298

行内元素水平居中如何设置？如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>行内水平...

水平居中-不定宽块状元素方法

ifuboy

09-22

323

不定宽块状元素：块状元素的宽度width不固定不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）： 1.加入 table 标签利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。第一步：为需要设置的居中的元素外面加入一个 ta...

参与评论您还未登录，请先登录后发表或查看评论

水平居中总结-不定宽块状元素方法

qq_33209343的博客

03-02

150

改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用text-align:center来实现居中效果。

宽度不确定的块级元素如何实现水平居中

sfyjknvcx的博客

08-26

613

如题，昨天我遇到了这个问题，现在决定写下来，是因为没有在别人的博客里面看到完整的这个思路，所以想做个记录，万一有小伙伴有同样的需求呢？先来讲一个我已经知道的知识，自适应宽度居中的问题。如果让我谈“如何水平居中”，我的认知就是“行内元素或行内块元素要靠父元素的text-align:center,块级元素要靠自己的左右margin为auto”，可以说是简单粗暴、能解决大部分问题的认知了。但是，现在想象一下这样的场景：你有一个块级容器，里面要展示一张图片，图片是动态的，甚至的大小都不固定，现在我们要求这个

不定宽块级元素水平居中

FEE

05-07

317

传统方法中，要让不定宽元素水平居中，我们一般采取以下结构： <div class="more-btn1"><span>查看更多</span></div> .more-btn1 { text-align: center; } .more-btn1 span { display: inline-block; paddi...

不定宽度的水平居中

zhangtao.的博客

12-23

151

不定宽度的水平居中 <div class="home"> <div class="head">我爱学习。我爱学习</div> </div> .home{ position: relative; height: 200px; background-color: rgb(160, 68, 68); } .head{ position: absolute; left: 50%; transform: translate(-50%); } 效果图

CSS水平居中总结(新手必看篇)

09-24

在CSS布局中，水平居中是一项常见的需求，无论是对行内元素还是块状元素，都有多种方法可以实现。本文将详细讲解如何使用CSS使元素水平居中，特别适合初学者理解掌握。首先，我们来看一下如何使行内元素如文本、...

浅谈css处理水平居中的问题

09-24

3. **不定宽块状元素的水平居中** 针对没有固定宽度的块级元素，有多种方法可以实现水平居中： - **方法1：使用`table`标签** 可以将内容包裹在`<table>`中，并将`table`的`margin`设置为`0 auto`，这将使其在父...

行内元素和块状元素的水平居中设置

xiamocsdn的博客

05-06

1248

我在上一篇文章里总结了一下块状元素、内联元素、内联-块状元素的区别三者的一个重要区别在于是不是独占一行以及能不能设置宽高、内外间距。在这个前提下，我们应该怎么设置元素在水平方向上的居中呢？行内元素的水平居中设置行内元素的水平居中有一个通用的方法：通过在其父元素中设置text-align:center来实现：我们给出一个html文件，写入一个div块状元素，包裹一个span内联元素： &l...

css 不定宽高元素水平垂直居中

八佾舞于庭

10-19

806

方法三种，可以根据实际需求选择。方法一 <body> <div id="box"> <div id="content">山夫不解数甲子，一叶落知天下秋。</div> </div> </body> html,body{ width:100

CSS中实现块级元素水平居中的N种方法

热门推荐

phenix323的博客

07-28

1万+

CSS中实现块级元素水平居中的N种方法： CSS中的居中可分为水平居中和垂直居中。 水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。下面详细介绍这几种情况。一、水平居中 1、行内元素居中顾名思义，行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素，可通过给父元素设置 text-align:center 来实现。另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。但有个首要条件是

css 不定宽度的块级元素水平居中

gbxiaohuozi的博客

05-14

3683

块级元素水平居中不能用text-align：center 但是有一种错觉如下<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>不定宽块状元素水平居中</title> <style> .div1{ margin-top: 100px; border:2px dotted red; text-align:c

html中div使用CSS实现水平/垂直居中的多种方式

weixin_30919429的博客

07-27

180

CSS中的居中，在工作中，会经常遇到。它可以分为水平居中和垂直居中，以下是几种实现居中的方式。 git 查看源码配合在线预览，效果更佳以下例子中，涉及到的CSS属性值。 .parent-frame { width: 200px; height: 200px; border: 1px solid red; } .child-...

css 块状元素垂直水平居中的方法

weixin_33708432的博客

05-22

937

1.使用定位 .box { position: absolute; top: 50%; left: 50%; margin: -100px -100px; width: 200px; height: 200px; background: #5B83AD; } 这里需要注意的是这种方法适用于已知块状元素的具体大小， margin 的百分比值参照其包含块的宽度进行计算，所以不能使用-50%。 2.cs...

水平居中总结-不定宽块状元素三种方法

北眼的博客

02-27

367

水平居中总结-不定宽块状元素方法（一）在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：加入 tabl...

css 块元素水平居中常用方法

PPPP_X的博客

11-23

354

块元素水平居中： 1.margin：0 auto 2.负边距居中：width：100px；left：50%；margin-left：-50px（自身高度的一半）；注意事项：父元素需设置定位与高度 margin方法： 1.块级元素，设置宽高 2.不能使用绝对定位 ...

详解元素的水平居中

kenny.feng

04-23

2231

前言：这是本人的笔记，花了点时间整理出来，希望可以帮助一些朋友少走弯路，可能有些不足之处，欢迎评论区留言，请多指正（如果您觉得有所帮助，点赞支持哦）元素的水平居中分两种情况：行内元素和块状元素，而块状元素又分为定宽块状元素和不定宽块状元素一、行内元素的水平居中 方法：如果被设置元素为文字、图片等行内元素时，对父元素设置text-align:center html代码： &l...

运用css3变形实现不定宽高元素在父元素或屏幕窗口水平垂直都居中的方法？

鹏仔工作室的秘密基地

02-01

468

转自鹏仔先生个人博客百度搜索：鹏仔先生网址 www.sharedblog.cn/?post=41 运用css3变形实现不定宽高元素在父元素或屏幕窗口水平垂直都居中的方法？一、在屏幕窗口水平垂直都居中，方法如下：元素{ position: fixed; left: 50%; top: 50%; transfrom: translate(...

CSS居中技巧解析：从行内元素到不定宽块状元素

我想要在父容器中水平居中显示。 .txtCenter { text-align: center; } ``` 对于定宽的块状元素，可以通过设置`margin`属性的左右值为`auto`来实现水平居中。这会将元素的左右外边距自动调整，使元素居中于父...