css零到一中级教程009：CSS 布局 - 水平和垂直对齐

最新推荐文章于 2024-04-23 13:46:57 发布

慕容屠苏

最新推荐文章于 2024-04-23 13:46:57 发布

阅读量75

点赞数

分类专栏： css零到一文章标签： css html 前端

本文链接：https://blog.csdn.net/kerryqpw/article/details/123681593

版权

css零到一专栏收录该内容

98 篇文章 2 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了CSS布局中各种元素的居中对齐方法，包括块元素、文本、图像的水平居中，以及使用position、float、line-height、transform和Flexbox实现的垂直对齐。此外，还探讨了clearfix Hack解决浮动元素溢出的问题。

摘要由CSDN通过智能技术生成

元素居中

居中对齐元素

要使块元素（例如 <div> ）水平居中，请使用 margin: auto;。

设置元素的宽度将防止其延伸到容器的边缘。

然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h1>居中对齐元素</h1>

<p>要使块元素（例如 div）水平居中，请使用 margin: auto;</p>

<div class="center">
  <p>Hello World!</p>
</div>

</b

了解本专栏

超级会员免费看

慕容屠苏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css零到一中级教程009：CSS 布局 - 水平和垂直对齐

元素居中居中对齐元素要使块元素（例如 <div> ）水平居中，请使用margin: auto;。设置元素的宽度将防止其延伸到容器的边缘。然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：<!DOCTYPE html><html><head><style>.center { margin: auto; width: 60%; border: 3px solid #73AD21; ...
复制链接

扫一扫