`

float:center实现 居中浮动

CSS浏览器XHTMLWebHTML 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="zh-cn" lang="zh-cn" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="麦鸡(MacJi)的博客，关注Web内容、结构与表现。" name="description" />
<meta content="Copyright (c) 2008 MacJi" name="copyright" />
<meta content="麦鸡,MacJi" name="author" />
<meta content="web前端开发,麦鸡,MacJi,Blog,博客" name="keywords" />
<title>跨浏览器实现float:center，No CSS hacks</title>
<style>
ul,li{
margin:0;
padding:0;
list-style:none;
}

#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
margin:10px;
padding:0 10px;
float:left;
position:relative;
right:50%;
}
</style>
</head>
<body>
<h1>跨浏览器实现float:center，No CSS hacks</h1>
<div id="macji">
<ul class="macji-skin">
<li>列表一,我是浮动的</li>
<li>列表二</li>
<li>列表三</li>
<li>这里可能是N</li>
</ul>
</div>
</body>
</html>

分享到：
| tcp协议
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css 跨浏览器实现float:center

    然而，CSS并没有提供一个直接的`float:center`选项来实现元素的居中浮动。 为了达到居中浮动的效果，我们可以利用其他CSS属性进行组合。在给定的例子中，我们可以看到一个使用`position`和负偏移量来模拟`float:...

    如何用float配合position:relative实现居中

    `overflow:hidden`是为了处理可能的浮动溢出问题，`text-align:center`则是为了确保行内元素在父容器内部水平居中。 总结来说，通过巧妙地结合`float`和`position:relative`，我们能够有效地解决IE6和IE7浏览器中...

    跨浏览器实现float:center

    原文：...居中浮动。。。 &lt;div id=macji&gt; &lt;ul class=macji-skin&gt; 列表一&lt;/li&gt; 列表二&lt;/li&gt; 列表三&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt; 我们希望实现li是浮动的，并且居中的（li个数不固定，ul宽度

    让横向排列的几个浮动(float:left)的子div居中显示

    然而，这种做法会使得父元素无法通过text-align:center属性来实现子元素的水平居中显示，因为浮动元素脱离了常规的文档流，不再受文本对齐方式的控制。 为了解决这一问题，文章中提到了一种变通的实现方法。具体...

    css 跨浏览器实现float-center.docx

    标题提到的“css 跨浏览器实现 float:center”实际上是指通过一些技巧来模拟`float:center`的效果，以达到在不同浏览器中使浮动元素居中的目的。这里我们将深入探讨如何实现这一目标，并结合提供的代码示例进行解析...

    float:left的对象(导航)如何居中示例探讨

    然而，使用float:left属性带来的一个问题是，它会让包含这些元素的父容器（比如标签）无法自动扩展以包含这些浮动元素，从而无法实现水平居中对齐。因为浮动元素脱离了文档流，父容器无法识别其宽度，所以父容器的...

    css左右居中对齐

    浮动布局常用于创建多列布局，但也可以用来实现居中。然而，这种方法现在已经较少使用，因为它难以处理复杂的布局需求。 ```css .container { text-align: center; } .child { float: left; /* 使用浮动，但...

    DIV+CSS中让布局居中.docx

    然而，这种方法仅适用于文本内容的居中，对于包含浮动元素（如使用`float:left`或`float:right`）的布局，我们需要采用不同的策略。在这种情况下，我们需要为包含这些浮动元素的父级容器设置宽度，并使用`margin: 0 ...

    在ie7下css居中样式text-align:center;偏左问题解决方法

    ` 是CSS中用于实现文本水平居中的一个属性。然而，当在Internet Explorer 7（简称IE7）这个较旧的浏览器版本中使用该样式时，可能会遇到一个问题：文本或内联元素并没有真正地居中，而是出现了偏左的现象。 这个...

    浮动后的li元素居中实现方法

    标题提到的“浮动后的li元素居中实现方法”主要探讨了如何在使用浮动布局时，确保`&lt;li&gt;`元素在导航条中居中对齐。以下是几种常用的方法及其优缺点： 1. **文本居中对齐**： - 在包裹`&lt;ul&gt;`的`&lt;div&gt;`上应用`text-...

    Float 菜单水平居中简单方法

    总的来说，这个简单的方法利用`display:inline-block`和`text-align:center`属性实现了Float菜单的水平居中，同时通过条件注释确保了老版本IE浏览器的兼容性。这种方案不仅简化了代码，也提高了代码的可读性和维护性...

    浮动_style_浮动导航栏_css如何浮动_

    总的来说，浮动导航栏是通过CSS的`position`和`float`属性实现的，它可以提供良好的用户体验，使用户在浏览长页面时始终保持导航的可见性。然而，随着CSS布局技术的发展，如Flexbox和Grid，我们有更多的选择来创建...

    DIV+CSS常用的网页布局代码

    通过以上示例可以看出，**DIV+CSS**提供了极其丰富的布局手段，无论是简单的居中布局还是复杂的多列布局，都可以轻松实现。掌握这些基础布局技巧对于前端开发者来说至关重要。同时，随着技术的发展，还可以进一步...

    前端面试精简篇前端面试精简篇

    在实现左右居中行内元素时，我们可以使用 text-align: center 属性将元素居中。对于定宽块状元素，我们可以将左右 margin 值设置为 auto 实现居中效果。对于不定宽块状元素，我们可以使用 table 布局或 position + ...

    典型的三行两列居中高度自适应布局

    通过`margin-left: auto`和`margin-right: auto`实现水平居中，同时设置`text-align: center`使内部内容居中对齐。 2. **Container**（#container）：包含左右两列的主要容器，它的作用是保持左右两列整体居中。...

    css定位表格

    同样通过`margin: auto`实现居中，例如： ```css body { margin: 0px; padding: 0px; text-align: center; } #content-top { margin-left: auto; margin-right: auto; width: 400px; } #content-end { margin...

    跨浏览器实现floatcenter.rar

    标题“跨浏览器实现float元素居中”表明我们将探讨如何在不同的浏览器环境下，使浮动元素保持在容器的中心位置。描述中的省略号暗示了这一话题的复杂性和可能涉及的多种方法。 首先，我们需要理解`float`的基本概念...

    具有Float属性的元素依然居中

    当为这些元素设置`float:left`属性时，它们会沿着左侧排列，但有时我们需要整个包含这些浮动元素的容器（如`&lt;ul&gt;`或`&lt;div&gt;`）保持居中对齐。本文将探讨两种实现这种居中效果的方法。 **方法一：使用`text-align:...

Magicbox
Global site tag (gtag.js) - Google Analytics