CSS 使用浮动居中元素
CSS 用于设置 HTML 元素在屏幕上的外观并同时控制网页的多个布局。 本文将讨论 CSS float 和 center 属性。
使用 CSS 居中浮动元素
CSS 浮动属性用于定位和格式化 HTML 文档的内容。 作为标准,float 属性只有四个值:left、right、none、inherit。
left 和 right 值会将元素浮动到容器的相应左侧和右侧。
使用 none 值使元素不浮动。 最后,inherit 值使属性继承其父级的 float 值。
我们不能将中心值与浮动元素一起使用。 因此,我们将在本文中探讨使浮动元素居中的方法。
使用 CSS 居中浮动元素的方法 1
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>CSS float center</h1>
<div class="container">
<div class="float_center">
<ul>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
</ul>
</div>
</div>
</body>
</html>
在上面的例子中,第一步是创建一个 HTML 容器类; 在其中,另一个类称为 float_center。 我们可以在两个类中添加我们想要浮动和居中的内容或元素。
.container{
border: 1px solid red;
float: left;
position: relative;
left: 40%;
}
之后,应将 CSS 属性添加到容器类中。 上面的 CSS 代码放置了 float 属性并将值设置为 left 以使容器类根据内容更改宽度。
我们可以在元素周围添加一个边框属性。 此外,位置应该是相对的,这意味着元素是相对于它们的正常位置放置的。
left 属性将导致它移出其正常位置。
在此示例中,我们将 left 属性设置为 40% 的值,以便内容将移动其正常位置的 40%。
作为CSS代码的结果,我们可以得到上面的输出。 一目了然,我们可以看到它在容器的左边缘居中。
float 元素已经居中,但我们应该添加以下 CSS 代码才能使其成功。
.container{
float: left;
position: relative;
left: 50%;
}
.float_center{
border: 1px solid red;
text-align: center;
background-color: bisque;
padding-right: 20px;
font-size: 25px;
margin-top: 50px;
float: left;
position: relative;
left:-50% ;
}
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>CSS float center</h1>
<div class="container">
<div class="float_center">
<ul>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
</ul>
</div>
</div>
</body>
</html>
在这段代码中,我们为 float_center 类添加了样式。 我们应该将 float 属性设置为左值。
该位置应相对于父类。 left 属性应该是 -50% 以使浮动元素居中。
除此之外,我们可以使用边框、文本对齐、背景颜色、填充、字体大小和边距属性等属性来设置浮动内容的样式。 这些属性可以定义设计师的需求。
输出:
这是上述浮动中心示例的最终结果。 同样,我们可以使用上面的代码将浮动元素调整到中心。
使用 CSS 居中浮动元素的方法 2
考虑 float-center 方法的另一种用法,我们可以识别分页。 它曾经适用于页面很多的网站。
在创建分页时,我们经常使用 float 属性来对齐。 如何使用 float 属性使分页居中很重要。
为了解决这个问题,我们可以使用以下 CSS 属性和值。
示例代码:
<!DOCTYPE html>
<head>
<title>Pagination</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2 style="text-align: center;">Float center pagination</h2>
<div class="center">
<div class="pagination">
<a href="#">«
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
</div>
</body>
这是包含两个类的 HTML 代码,分别是居中和分页。 在这段 HTML 代码中,我们设置了五个 href 元素,其中包含每个页面的链接。
考虑到上述结果,我们可以看到分页元素没有居中或浮动。 使用下面的 CSS 代码,我们可以设置分页浮动和居中。
.center{
text-align: center;
}
.pagination{
display: inline-block;
margin: 50px;
}
.pagination a{
color: black;
float: left;
padding: 9px 18px;
text-decoration: none;
border: 1px solid black;
border-radius: 5px;
background-color: #efeded;
margin: 0 4px;
}
.pagination a:hover{
background-color: #7d656f;
}
我们可以设置一个 text-align 属性给值 center 来使分页居中。 通常,可以使用 float 属性将分页放在每个元素旁边。
如您所见,上面代码的分页类显示为内联块并将边距设置为 50 像素。
在 HTML 代码的分页类中,我们定义了七个 href 元素。 在 CSS 代码中,我们创建了一个分页选择器来设置这些 href 元素的样式。
float属性主要设置为left值,用来并排放置分页元素。
color 属性定义分页元素的字体颜色。 padding 属性在元素及其边界内创建空间,border-radius 属性使边界角变圆。
用于设置 href 元素样式的背景颜色、边距、文本装饰和边框属性。 最后,将悬停属性添加到分页元素以更改背景颜色。
我们可以通过上面的 CSS 代码获得以下 float-center 分页帮助。
以上两种方法都可以用来使浮动元素居中。 第一种方法适用于任何拥有浮动元素的场景。
第二个可以创建各种分页。
居中浮动元素的替代方法
强烈建议不要使用 float 属性使单行文本居中。 在包含块上应用 text-align:center 。
此外,我们可以通过简单地将左右边距设置为相似的值来使块或元素居中。 如果块具有清晰的宽度,我们可以将左右边距设置为自动值。
总结
本文考虑如何在 CSS 中使浮动块或元素居中。 我们已经提到了两种适用于任何浮动元素或块的方法。
相关文章
覆盖 Bootstrap CSS
发布时间:2023/04/28 浏览次数:59 分类:CSS
-
本文介绍的是著名的 CSS UI 框架 Bootstrap。 我们将讨论使用自定义样式覆盖 Bootstrap CSS 的过程。
使用 CSS 制作带圆角的 HTML 表格
发布时间:2023/04/28 浏览次数:107 分类:CSS
-
这个简短的文章是关于在 HTML 页面上制作圆角表格的 CSS 样式。使用 CSS 制作带圆角的 HTML 表格 使图像、表格或 div 段的角变圆的属性是 border-radius。
CSS 设置轮廓 outline 的半径
发布时间:2023/04/28 浏览次数:123 分类:CSS
-
在本文中,用户将学习如何为 outline 属性设置圆角,与 border-radius 属性相同。 在这里,我们已经解释了将圆角应用于轮廓属性的不同方法。
使用 CSS 居中视频
发布时间:2023/04/28 浏览次数:73 分类:CSS
-
在本文中,用户将学习仅使用 CSS 将 <video> 元素居中。 我们已经在下面解释了使用 CSS 使视频居中的多种方法。
使用 CSS 居中内联块
发布时间:2023/04/28 浏览次数:108 分类:CSS
-
在本文中,我们将创建多个 HTML 元素并将其显示设置为 inline-block。 之后,我们将学习使用 display: inline-block 将所有元素居中。
使用 CSS 添加透明边框
发布时间:2023/04/28 浏览次数:98 分类:CSS
-
在本文中,我们将讨论在 HTML 中的图像、按钮或任何其他对象周围创建透明边框。 透明边框是图像或对象周围的边框,可改善用户体验。
使用 CSS 向上移动文本
发布时间:2023/04/28 浏览次数:153 分类:CSS
-
有时,在开发网页时,我们将文本放在底部或页脚中,因此我们可能需要在文本下方留一个空格并将文本上移。 我们将学习如何使用 css 从网页底部向上移动文本。
使用 CSS 和 JavaScript 制作文本闪烁
发布时间:2023/04/28 浏览次数:146 分类:CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
CSS 防止文本选择
发布时间:2023/04/28 浏览次数:75 分类:CSS
-
在本文中,我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。 此外,您还将了解如何为不同的 Web 浏览器使用该属性。