CSS进阶篇--CSS让浮动元素水平居中

fevin 发布于2019-08-28 18:17 / 2980人阅读

摘要：对于定宽的非浮动元素我们可以用进行水平居中。对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。

对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。

对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。如下：

HTML 代码：


    我是浮动的
    我也是居中的

CSS 代码：

.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}

这样就解决了浮动元素水平居中了；

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。

GPU云服务器云服务器 html居中浮动元素浮动-前端-css html居中css css元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111139.html

CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
css常见的各种布局上（两列布局）

摘要：目录一大结构上的导航栏和内容区域两栏布局博客园为例腾讯课堂个人中心页慕课网个人中心页个人中心页二版的结构三类似九宫格布局的两列结构四图文两列布局左图右文字非垂直居中，左图，右固定行数的文字，右侧文字和左边图片垂直居中。目录：一、大结构上的导航栏和内容区域两栏布局1、博客园为例2、腾讯课堂个人中心页3、慕课网个人中心页4、github个人中心页二、mini版的nav+cont结构三、类似九宫格...

番茄西红柿 2019-04-23 11:40 评论0 收藏0