CSS 使用浮动居中元素

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

CSS 使用浮动居中元素

作者：迹忆客最近更新：2023/04/27 浏览次数：

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 Float Center - Output 2

这是上述浮动中心示例的最终结果。同样，我们可以使用上面的代码将浮动元素调整到中心。

使用 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="#">&laquo;
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">&raquo;</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 中使浮动块或元素居中。我们已经提到了两种适用于任何浮动元素或块的方法。

上一篇：使用 CSS 绝对定位居中 Div

下一篇：CSS 防止文本选择

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

覆盖 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 浏览器使用该属性。

迹忆客专注技术分享