使用 CSS，我如何保持“框架”居中，并在框架内对齐内容答案

【问题标题】：Using CSS, how do I keep a "frame" centered, and align things within the frame使用 CSS，我如何保持“框架”居中，并在框架内对齐内容
【发布时间】：2022-03-25 10:03:40
【问题描述】：

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

既然一张图值一千字，我的意思是这样的：

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

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

【问题讨论】：

简单的float:right; 还不够吗？
大多数改变元素渲染位置的 CSS 规则都是在该元素的容器中进行的。

标签： html css web alignment

【解决方案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/

【讨论】：

【解决方案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;
}

祝你好运！

【讨论】：