`
天梯梦
  • 浏览: 13733287 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

CSS: 居中一个宽度为auto的块元素 (width:auto;margin:auto) center an auto-width div

 
阅读更多

for parent block or body  - text-align:center;  for centerd block- display:inline-block;

<style>
body{text-align:center}
.center{display:inline-block;background:red}
</style>

<div class="center">
    <p contenteditable="true">write text</p>
</div>

 

DEMO http://jsfiddle.net/RXP4F/

参考: http://stackoverflow.com/a/18524791/4484798

 

 

关于 inline-block 的用法, 请参考文章:  详解CSS display:inline-block的应用

 

本文转自: CSS: 居中一个宽度为auto的块元素 (width:auto;margin:auto) center an auto-width div

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    DIV+CSS DIV居中布局

    设置`margin-left`和`margin-right`为`auto`,可以使`&lt;div&gt;`在父容器中水平居中。例如: ```css .centered-div { width: 200px; /* 元素的宽度 */ margin: 0 auto; /* 自动左右外边距实现居中 */ } ``` 2. **...

    div+css垂直居中和水平居中

    在网页设计中,实现元素的垂直居中和水平居中是一项常见的需求,这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中,div元素作为布局容器广泛使用,而CSS则是样式控制的...

    CSS2.1如何让块元素垂直水平居中.rar

    CSS中的每个元素都可以看作一个矩形盒子,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。块级元素默认占据一整行,并根据其内容宽度和高度以及内外边距调整大小。 2. 定位: CSS提供了相对...

    DIV+CSS水平垂直居中

    在上面的代码中,我们定义了一个名为center的CSS类,然后将其应用于DIV元素。通过设置left和top属性为50%,然后将margin-left和margin-top属性设置为负值,以便将其调整到中心位置。 三、DIV+CSS水平垂直居中的优点...

    div+css居中

    在网页设计领域,"div+css居中"是一种常见的布局技术,用于使元素在网页上水平或垂直居中对齐。这种技术利用HTML中的`&lt;div&gt;`元素作为容器,结合CSS(Cascading Style Sheets)样式来实现内容的定位。在本教程中,...

    DIV+CSS常用的网页布局代码

    /* 这里可能存在一个笔误,应该是两个宽度设置为其中之一 */ } ``` - **知识点**: - `margin: 0px;`:去除默认的边距。 - `text-align: center;`:使文本居中显示。 - `margin-left: auto; margin-right: auto;...

    Div+CSS布局居中.pdf

    通过设置元素的`margin-left`和`margin-right`为`auto`,可以在具有固定宽度的容器内使元素水平居中。例如: ```css div#container { margin-left: auto; margin-right: auto; width: 168px; } ``` 这种方法...

    CSS网页布局DIV水平居中的各种方法

    这种方法是最简单的,直接将 DIV 的 margin 属性设置为 auto 即可实现水平居中。代码如下: ```css #wrap { margin: 0 auto; } ``` 这段代码的意思是,将 DIV 的左右边距设置为自动,从而实现水平居中。 方法二:...

    Div+CSS布局居中.docx

    通过将元素的`margin-left`和`margin-right`都设置为`auto`,元素会自动调整自身的左右外边距,使其在容器内居中。为了使这种方法生效,容器必须有固定的宽度。例如: ```css div#container { margin-left: auto;...

    01拓展-居中方式.pptx

    下面是一个简单的示例代码: ```css div { position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -100px; width: 300px; height: 200px; background-color: pink; } ``` 在上面的...

    DIV+CSS上下左右绝对居中

    我们将创建一个主 `div`,作为需要居中元素的容器,并为它定义CSS样式。 ```html &lt;div class="container"&gt; &lt;div class="centered-content"&gt; &lt;!-- 这里放置需要居中的内容 --&gt; &lt;/div&gt; &lt;/div&gt; ``` 接下来,我们来...

    div居中-divjuzhong-master.zip

    在前端开发中,"div居中" 是一个常见的布局需求,尤其在构建网页时,我们需要让div元素在页面上水平或垂直居中显示。这里,我们主要探讨如何使用CSS(层叠样式表)来实现这一目标,同时也会涉及到HTML的基本结构。 ...

    div层居中代码下载

    上述代码将页面中的文本内容设置为居中对齐,当某个`&lt;div&gt;`的宽度小于其父元素时,该`&lt;div&gt;`会自动居中显示。但这种方式只适用于文本内容居中,对于非块级元素(例如图片或按钮等)并不适用。 **对于特定`&lt;div&gt;`的...

    css控制div中元素居中的示例.pdf

    在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的 div。需要特别注意的一点就是,必须为该容器指定宽度: div#container { margin-left: auto; margin-right: auto; width: 168px; } 在大多数...

    Div+CSS布局居中

    **基本原理**:通过设置一个元素的`margin-left`和`margin-right`为`auto`来使其水平居中。这种方法适用于固定宽度的元素。 **代码示例**: ```css div#container { margin-left: auto; margin-right: auto; ...

    css布局居中和CSS内容居中区别和对应DIV CSS代码.docx

    - **布局居中示例**:创建一个300px宽、100px高的红色边框的DIV,并应用`margin: 0 auto`,即可观察到布局居中的效果。 - **内容居中示例**:创建三个相同大小的红色边框的DIV,分别应用`text-align: center`、`...

    div居中div居中的8种方法

    在网页设计中,让`div`元素居中是一项常见的需求,可以实现各种视觉效果和布局。标题提到的“div居中div居中的8种方法”是网页开发中的基础技巧,适用于不同场景。以下将详细解释这8种方法,并提供相关的应用示例。 ...

    前端笔记前端笔记前端笔记前端笔记,一些div居中以及常用的CSS属性

    1. **margin自动填充**:设置`div`的`margin`为`auto`,可以使其在父元素中水平居中。例如: ```css div { width: 200px; /* 定义div宽度 */ margin: 0 auto; /* 自动填充左右边距,实现水平居中 */ } ``` 2. **...

Global site tag (gtag.js) - Google Analytics