Pau*_*jan 65 css center alignment
我希望整个块在其父级中居中,但我希望块的内容保持对齐.
示例效果最佳
在本页面 :
ascii艺术应该居中(如它所示),但它应该排成一行,看起来像"YAML".
或这个 :
错误消息应该像在控制台中一样排列.
Kea*_*von 129
首先,创建一个div以其子内容为中心的父级text-align: center.接下来,创建一个子项div,用于display: inline-block调整其子项的宽度,并text-align: left根据需要使其保持的内容对齐到左侧.
<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
Centered<br />
Content<br />
That<br />
Is<br />
Left<br />
Aligned
</div>
</div>Pau*_*jan 17
重新提出另一个问题的工作答案:如何水平居中可变宽度的浮动元素？
假设浮动且将居中的元素是具有id ="content"的div ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
并应用以下CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
这是一个很好的参考http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
如果我理解你，你需要使用来居中一个容器（或块）
margin-left: auto;
margin-right: auto;
并左对齐它的内容：
text-align: left;
我发现在容器内居中和左对齐文本的最简单方法如下：
HTML：
<div>
<p>Some interesting text.</p>
</div>
CSS：
P {
width: 50%; //or whatever looks best
margin: auto; //top and bottom margin can be added for aesthetic effect
}
希望这就是您正在寻找的东西，因为我花了相当多的搜索时间才找到这个非常基本的解决方案。