Question

在网页上，我想创建一个虚拟框架（以页面为中心），并能够使用CSS属性对齐框架内的元素（例如图像，文本等）。

由于图片胜过千言万语，这就是我的意思：

enter image description here

我希望能够将“Text1”对齐到相对于保持以网页为中心的虚拟框架的左侧。与“CenteredText”类似的想法和蓝色框相对于框架右侧对齐。

我非常感谢有关如何做到这一点的建议。

Answer 1

这可能会对您有所帮助：

<强> HTML：

<div class="frame">
    <div>Text1</div>
    <div class="centered">Centered text</div>
    <div class="box"></div>
    <div class="clr"></div>
</div>

<强> CSS：

.frame{width:80%; margin:0 auto; border:1px solid #444; height:500px}
.centered{text-align:center}
.box{background:blue; height:50px; width:50px; border:2px solid black; float:right}
.clr{clear:both}

jsfiddle： http://jsfiddle.net/ashishanexpert/fqaDQ/

Answer 2

margin: 0 auto;

在你的CSS中。

你需要一个可以攻击的类或id的div，然后给它上面的属性。

这会将div放在页面中心。

<body>
<div id="wrapper">

<div id="left">left</div>

<div id="centered">centre</div>

<div id="right">right</div>
</div> <!--close wrapper-->

的CSS：

#wrapper{
    margin: 0 auto; 
    width: 960px;
    position: relative;
}

#left{
    float: left;
}
#right{
    float: right;
}

我建议阅读CSS和HTML - 购买一本begginers书 - 这是你将要学习的第一件事！

祝你好运！

使用CSS，如何使“框架”居中，并在框架内对齐事物

2 个答案: