`
qiannianhua
  • 浏览: 18906 次
社区版块
存档分类
最新评论

Html与Css---居中

 
阅读更多

1.水平居中

1).行内元素:
       如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

 

如下代码:

 

html代码:

<body>
  <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示。</div>
</body>

 

css代码:

<style>
    div.txtCenter{
    text-align:center;
   }
</style>

 

2).定宽块状元素:
       满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中;


html代码:

<body>
  <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>
</body>

 

css代码:

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/  
    width:500px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>

 

也可以写成:

margin-left:auto;
margin-right:auto;

 

注意:元素的“上下 margin” 是可以随意设置的。

 

3).不定宽块状元素:
      不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):
a.加入 table 标签;
b.设置 display;inline 方法;
c.设置 position:relative 和 left:50%;

 

2.垂直居中

1).父元素高度确定的单行文本: 

<div class="container">
   hi,imooc!
  </div>

 

 css代码:

<style>
  .container{
   height:100px;
   line-height:100px;
   background:#999;}
  </style>

 

2).垂直居中方法:
    方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
 table td{height:500px;backgroud:#ccc}

    方法二:

 对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中,对不支持display:table-cell的ie6和ie7,使用特定格式的hack。

分享到:
评论

相关推荐

    html-css-网页模板-公司介绍

    HTML和CSS是构建网页的基本技术,它们在"html-css-网页模板-公司介绍"这个主题中扮演着核心角色。HTML(HyperText Markup Language)是一种标记语言,用于定义网页的结构和内容,而CSS(Cascading Style Sheets)则...

    Html_Css-源码.rar

    HTML和CSS是构建网页设计的基础技术,它们共同决定了网页...同时,研究CSS文件,看看是如何与HTML元素配合,实现各种视觉效果的。通过实践,你将更深入地掌握这两种核心技术,为创建美观、功能丰富的网页打下坚实基础。

    3一面 3:CSS-HTML 知识点与高频考题解析.md

    # 一面 3:CSS-HTML 知识点与高频考题解析 CSS 和 HTML 是网页开发中布局相关的组成部分,涉及的内容比较多和杂乱,本小节重点介绍下常考的知识点。 ## 知识点梳理 - 选择器的权重和优先级 - 盒模型 - 盒子大小...

    CSS-DIV 十天搞定

    在HTML中,我们创建了一个id为"page-container"的div,作为整个网站的容器,并通过CSS设置其宽度、背景色以及居中显示。 第三步,我们进一步细化网页布局,将网站分为五个独立的div,分别对应之前规划的五个部分。...

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`&lt;div&gt;`元素是一...

    css-win8-buttons

    《CSS实现Windows 8风格按钮的设计与应用》 在网页设计中,用户界面的美观性和易用性至关重要,而按钮作为交互元素的核心部分,其设计风格直接影响到用户体验。"css-win8-buttons"项目正是针对这一需求,提供了一套...

    html+jq+css 自适应屏幕居中

    标题中的“html+jq+css 自适应屏幕居中”指的是使用HTML、JavaScript(jQuery库)和CSS技术来实现网页元素在不同屏幕尺寸下都能保持居中的功能,特别是针对弹窗的场景。这样的设计有助于提供良好的用户体验,无论...

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

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

    DIV+CSS DIV居中布局

    本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先,我们要理解`&lt;div&gt;`元素。`&lt;div&gt;`是“division”的缩写,代表一个区域或区块,在HTML中用于组合其他元素,是构建网页布局的基础。通过设置`&lt;div&gt;`...

    css-dictionary(CSS常用英语词汇详解)

    与`Centimeter`相同,是长度单位,在CSS中可用于设置尺寸。 - **Dashed**: 虚线。CSS中`border-style:dashed`用于创建虚线边框。 - **Display**: 显示。CSS中的`display`属性用于定义元素的渲染方式,如`block`、`...

    CSS-背景图定位

    HTML5在CSS背景处理方面也提供了新的特性,如`background-size`,可以用来改变背景图的尺寸。例如,将背景图等比例缩放至完全覆盖元素: ```css div { background-size: cover; } ``` 此外,CSS3引入了`...

    CSS解决未知高度的DIV垂直居中

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...

    DIV+CSS上下左右绝对居中

    在网页设计中,"DIV+CSS上下左右绝对居中"是一个常见的布局需求,尤其是在构建响应式网站时。这个主题涉及到CSS(层叠样式表)的布局技巧,它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...

    css-绝对定位的参考对象

    在CSS布局中,绝对定位(absolute positioning)是一种强大的定位机制,允许元素脱离其正常文档流,并根据相对于其他元素或浏览器窗口进行定位。本篇将深入探讨绝对定位的参考对象、工作原理及其在实际开发中的应用...

    DIV-CSS-必考题.docx

    问题描述:假定有如下情况:&lt;div id="a"&gt;&lt;div id="b"&gt;&lt;/div&gt;&lt;/div&gt; 如果要实现 b 在 a 中居中放置,一般只需用 CSS 设置 a 的 text-align 属性为 center。这样的方法在 IE 里看起来一切正常;但是在 Firefox 中 b 却...

    「HTML+CSS」--自定义按钮样式【003】

    在网页设计中,HTML(超文本标记语言)和CSS(层叠样式表)是构建页面布局和样式的基石。本教程“「HTML+CSS」--自定义按钮样式【003】”着重于如何利用这两种技术来创建独特的、个性化的按钮样式,提升网页交互体验...

    TailwindCSS一个实用第一的CSS框架用于快速构建自定义UI

    同时,由于Tailwind的样式是基于类的,因此它与CSS-in-JS库如styled-components或emotion.js也能很好地共存。 在实际项目中,使用Tailwind CSS时,通常会结合PostCSS,它是一个可以转换CSS的工具。通过安装相关的...

    css实现垂直居中

    以下是一些主要的CSS技术,它们可以帮助你实现"css实现垂直居中": 1. **Flexbox布局** Flexbox是现代CSS布局模式,特别适合处理容器内子元素的对齐问题。要实现垂直居中,可以设置容器的`display`属性为`flex`,...

    如何使用CSS将HTML页面居中显示

    ### 如何使用CSS将HTML页面居中显示 在网页设计中,实现页面元素的居中显示是一项基本且重要的技能。无论是对于初学者还是有经验的开发者来说,掌握如何使用CSS来实现HTML页面的居中对齐都是非常必要的。本文将详细...

    【小练习03】CSS-表格(table)--天气预报

    在网页设计中,CSS(Cascading Style Sheets)与HTML是构建页面布局和样式的基石。本练习聚焦于使用CSS来美化HTML中的表格,以创建一个专业的天气预报展示。我们将探讨如何利用这两种语言来实现这一目标。 首先,...

Global site tag (gtag.js) - Google Analytics