html float字居中,css-float和居中问题

本文介绍了如何使用CSS实现元素的水平和垂直居中,包括清除浮动、inline元素和block元素的居中方法,以及不同情况下的垂直居中解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考资料

笔记

父容器清除浮动,避免父元素的塌陷,即内部元素都发生浮动后,高度为0.

Box 1
Box 2
Box 3

.box-set:before,

.box-set:after {

display: table;

content: "";

}

.box-set:after {

clear: both;

}

.box-set {

*zoom: 1;

}

.box-set {

background: red;

}

.box {

background: #8ec63f;

margin-top: 20px;

height: 100px;

float: left;

margin: 10px;

width: 200px;

box-shadow: 0 0 500px #000;

}

f97a18b02172?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

效果图.png

水平居中

inline元素在block父元素内时:

.center-children {

text-align: center;

}

下面是一个例子:

This text is centered.

One

Two

Three

Four

body {

background: #f06d06;

}

header, nav {

text-align: center;

background: white;

margin: 20px 0;

padding: 10px;

}

nav a {

text-decoration: none;

background: #333;

border-radius: 5px;

color: white;

padding: 3px 8px;

}

f97a18b02172?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

效果.png

如果是block元素时:

.center-me {

margin: 0 auto;

width: 200px;// 必须加宽度,否则block元素会撑满宽度,没必要居中了

}

下面是一个例子:

I'm a block level element and am centered.

body {

background: #f06d06;

}

main {

background: white;

margin: 20px 0;

padding: 10px;

}

.center {

margin: 0 auto;

width: 200px;

background: black;

padding: 20px;

color: white;

}

f97a18b02172?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

效果.png

如果是多个block元素排列成一行并居中时:

第一种做法是改变display的类型:

I'm an element that is block-like with my siblings and we're centered in a row.

I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings

do.

I'm an element that is block-like with my siblings and we're centered in a row.

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

margin: 20px 0;

padding: 10px;

}

main div {

background: black;

color: white;

padding: 15px;

max-width: 125px;

margin: 5px;

}

.inline-block-center {

text-align: center;

}

.inline-block-center div {

display: inline-block;

text-align: left;

}

f97a18b02172?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

效果.png

第二种是使用flex:

I'm an element that is block-like with my siblings and we're centered in a row.

I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings

do.

I'm an element that is block-like with my siblings and we're centered in a row.

.flex-center {

display: flex;

justify-content: center;

}

效果与上图一致

垂直居中

如果是inline元素且在一行中垂直居中

只要把该元素的上下padding设置为一样即可,

.link {

padding-top: 30px;

padding-bottom: 30px;

}

例如:

We're

Centered

Bits of

Text

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

margin: 20px 0;

padding: 50px;

}

main a {

background: black;

color: white;

padding: 40px 30px;

text-decoration: none;

}

效果如下图:

f97a18b02172?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

效果.png

如果因为各种原因不能使用padding设置,比如内容无法在一行内显示,则可以使用把line-height等于height即可:

.center-text-trick {

height: 100px;

line-height: 100px;

white-space: nowrap;

}

例如:

I'm a centered line.

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

margin: 20px 0;

padding: 40px;

}

main div {

background: black;

color: white;

height: 100px;

line-height: 100px;

padding: 20px;

width: 50%;

white-space: nowrap;

}

效果:

f97a18b02172?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

效果.png

如果是inline元素且在多行中垂直居中

第一种方法:

I'm vertically centered multiple lines of text in a real table cell.

body {

background: #f06d06;

font-size: 80%;

}

table {

background: white;

width: 240px;

border-collapse: separate;

margin: 20px;

height: 250px;

}

table td {

background: black;

color: white;

padding: 20px;

border: 10px solid white;

/* default is vertical-align: middle; */

}

第二种方法:

I'm vertically centered multiple lines of text in a CSS-created table layout.

body {

background: #f06d06;

font-size: 80%;

}

.center-table {

display: table;

height: 250px;

background: white;

width: 240px;

margin: 20px;

}

.center-table p {

display: table-cell;

margin: 0;

background: black;

color: white;

padding: 20px;

border: 10px solid white;

vertical-align: middle;

}

第三种方法:

I'm vertically centered multiple lines of text in a flexbox container.

body {

background: #f06d06;

font-size: 80%;

}

div {

background: white;

width: 240px;

margin: 20px;

}

.flex-center {

background: black;

color: white;

border: 10px solid white;

display: flex;

flex-direction: column;

justify-content: center;

height: 200px; // 必须有一个固定的高度

resize: vertical;

overflow: auto;

}

.flex-center p {

margin: 0;

padding: 20px;

}

效果如下:

f97a18b02172?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

效果.png

如果以上都不能使用:

.ghost-center {

position: relative;

}

.ghost-center::before {

content: " ";

display: inline-block;

height: 100%;

width: 1%;

vertical-align: middle;

}

.ghost-center p {

display: inline-block;

vertical-align: middle;

}

例如:

I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element

body {

background: #f06d06;

font-size: 80%;

}

div {

background: white;

width: 240px;

height: 200px;

margin: 20px;

color: white;

resize: vertical;

overflow: auto;

padding: 20px;

}

.ghost-center {

position: relative;

}

.ghost-center::before {

content: " ";

display: inline-block;

height: 100%;

width: 1%;

vertical-align: middle;

}

.ghost-center p {

display: inline-block;

vertical-align: middle;

width: 190px;

margin: 0;

padding: 20px;

background: black;

}

如果是block元素且已知元素高度

不知道高度的情况很常见,但是如果知道高度,可以:

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

height: 100px;

margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */

}

例如:

I'm a block-level element with a fixed height, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

height: 300px;

margin: 20px;

width: 300px;

position: relative;

resize: vertical;

overflow: auto;

}

main div {

position: absolute;

top: 50%;

left: 20px;

right: 20px;

height: 100px;

margin-top: -70px;

background: black;

color: white;

padding: 20px;

}

效果如下:

f97a18b02172?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

效果.png

如果是blobk元素且不知道元素高度

如下:

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

例如:

I'm a block-level element with an unknown height, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

height: 300px;

margin: 20px;

width: 300px;

position: relative;

resize: vertical;

overflow: auto;

}

main div {

position: absolute;

top: 50%;

left: 20px;

right: 20px;

background: black;

color: white;

padding: 20px;

transform: translateY(-50%);

resize: vertical;

overflow: auto;

}

如果可以使用flexbox

.parent {

display: flex;

flex-direction: column;

justify-content: center;

}

例如:

I'm a block-level element with an unknown height, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

height: 300px;

width: 200px;

padding: 20px;

margin: 20px;

display: flex;

flex-direction: column;

justify-content: center;

resize: vertical;

overflow: auto;

}

main div {

background: black;

color: white;

padding: 20px;

resize: vertical;

overflow: auto;

}

同时水平和垂直居中

如果元素的宽高是固定的

.parent {

position: relative;

}

.child {

width: 300px;

height: 100px;

padding: 20px;

position: absolute;

top: 50%;

left: 50%;

margin: -70px 0 0 -170px;

}

例如:

I'm a block-level element a fixed height and width, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

padding: 20px;

}

main {

position: relative;

background: white;

height: 200px;

width: 60%;

margin: 0 auto;

padding: 20px;

resize: both;

overflow: auto;

}

main div {

background: black;

color: white;

width: 200px;

height: 100px;

margin: -70px 0 0 -120px;

position: absolute;

top: 50%;

left: 50%;

padding: 20px;

}

效果:

f97a18b02172?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

效果.png

如果不知道元素的宽高

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

例如:

I'm a block-level element of an unknown height and width, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

padding: 20px;

}

main {

position: relative;

background: white;

height: 200px;

width: 60%;

margin: 0 auto;

padding: 20px;

resize: both;

overflow: auto;

}

main div {

background: black;

color: white;

width: 50%;

transform: translate(-50%, -50%);

position: absolute;

top: 50%;

left: 50%;

padding: 20px;

resize: both;

overflow: auto;

}

效果:

f97a18b02172?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

效果.png

如果可以用flexbox

.parent {

display: flex;

justify-content: center;

align-items: center;

}

例如:

I'm a block-level-ish element of an unknown width and height, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

padding: 20px;

}

main {

background: white;

height: 200px;

width: 60%;

margin: 0 auto;

padding: 20px;

display: flex;

justify-content: center;

align-items: center;

resize: both;

overflow: auto;

}

main div {

background: black;

color: white;

width: 50%;

padding: 20px;

resize: both;

overflow: auto;

}

### CSS Float 属性实现居中效果的方法 尽管 `float` 属性本身并不支持直接的水平居中功能,但可以通过一些技巧间接实现这一目标。以下是几种常见的解决方案: #### 方法一:通过父容器设置自动外边距 如果希望子元素在父容器中水平居中显示,可以利用 `margin: auto;` 的特性来实现。 ```css .parent { text-align: center; /* 设置父级文本居中 */ } .child { display: inline-block; margin-left: auto; margin-right: auto; width: 200px; /* 子元素宽度固定 */ } ``` 这种方法适用于需要让浮动元素在其父容器内水平居中的场景[^1]。 --- #### 方法二:使用伪类清除浮动并配合绝对定位 另一种方法是借助相对定位负边距技术完成中心化布局。此方案通常用于已知高度或宽度的情况下。 ```css #floater { float: left; height: 50%; margin-bottom: -120px; /* 负值等于内容区域的一半高度 */ } #content { clear: both; height: 240px; position: relative; } ``` 这里的关键在于调整上下方向上的偏移量以达到视觉上的平衡感[^3]。 --- #### 方法三:Flexbox 布局替代传统Float方式 虽然题目限定讨论基于`float`属性的操作,但在现代开发实践中推荐采用更灵活强大的 Flexbox 技术代替旧式的浮动机制来进行复杂排列设计工作。下面展示了一个简单的例子说明如何运用 flex 容器轻松达成项目间的均匀分布以及自适应大小变化的效果。 ```css .container { display: flex; justify-content: center; /* 主轴上居中 */ align-items: center; /* 交叉轴上居中 */ height: 300px; /* 可选的高度设定 */ border: 1px solid black; /* 辅助查看边界线 */ } .item { width: 100px; height: 100px; background-color: lightblue; } ``` 以上代码片段展示了如何创建一个既能在水平也能在垂直维度都处于中间位置的小方块实例[^2]。 需要注意的是,在实际应用过程中可能还需要考虑浏览器兼容性响应式设计等因素的影响。 --- ### 总结 综上所述,严格意义上讲,仅依靠单一的 `float` 属性无法单独完成真正的居中操作;然而结合其他样式声明或者引入更新颖的技术框架则完全可以满足类似的排版需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值