水平居中设置-定宽块状元素

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

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

html代码：

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

css代码：

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

也可以写成：

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

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

转载于:https://www.cnblogs.com/Rinpe/p/5558682.html

水平居中设置-定宽块状元素相关推荐

31.水平居中总结-不定宽块状元素方法（三）
方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中 ...
行内元素和块状元素的水平居中设置
我在上一篇文章里总结了一下块状元素.内联元素.内联-块状元素的区别三者的一个重要区别在于是不是独占一行以及能不能设置宽高.内外间距. 在这个前提下,我们应该怎么设置元素在水平方向上的居中呢? 行内元 ...
css 对话框水平居中,CSS——水平居中设置(示例代码)
一.行内元素如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 二.块状元素当被设置元素为块状元素时用 text-align:cen ...
CSS 水平居中设置
1. 行内元素水平居中如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.如下代码: html代码: <body><d ...
0428专题：行内元素与块状元素
专题: 行内元素与块状元素块状元素 |-特点:默认占一整行.可以自动换行.可以设置大小 |-常见块状元素:div.li 行内元素 |-特点:不能设置宽高,内容有多大,我就有多大: 对m ...
【CSS】一侧定宽，另一侧自适应的布局该如何去做
一侧定宽,一侧自适应的页面布局在现在用的很多,有哪些实现方式呢? (个人总结,这个要看是左定右适.还是左适右定.视情况而定) 1, 左边固定,右边自适应:通过浮动和margin取正值来实现: 这里的原 ...
background背景图片自适应_一侧定宽、一侧自适应，尽量多的方案实现？「前端剑指offer」...
# 问题一侧定宽.一侧自适应,尽量多的方案实现. # 回答有下面几种方案能实现一侧定宽一侧自适应. 使用flex布局,这也是目前主流方式.父容器设置display:flex,定宽字元素设置flex ...
Html百分比设宽偏差大,absolute和relative元素设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
块状元素的居中，首先设置宽度，再设 margin: 0 auto
块状元素的居中,首先设置宽度 width="10px",再设 margin: 0 auto; . 转载于:https://www.cnblogs.com/npk19195globa ...
absolute和relative元素设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...

水平居中设置-定宽块状元素

水平居中设置-定宽块状元素相关推荐

最新文章

热门文章