CSS:居中块，但将内容向左对齐 [英] CSS: Center block, but align contents to the left

查看：31 发布时间：2021/11/27 8:05:48 css alignment center

本文介绍了CSS:居中块，但将内容向左对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

我希望整个块在其父块中居中，但我希望块的内容左对齐.

示例最有用

在此页面上:

ascii 图像应该居中(正如它所显示的那样)但它应该排列并看起来像YAML".

或者这个:

错误消息应该像在控制台中一样排列.

解决方案

假设浮动并居中的元素是一个 id="content" 的 div ...

<div id="包裹"><div id="内容">这将居中

并应用以下 CSS

#wrap {向左飘浮;位置:相对；左:50%；}#内容 {向左飘浮;位置:相对；左:-50%；}

I want a whole block to be centered in its parent, but I want the contents of the block to be left aligned.

Examples serve best

On this page :

the ascii art should be centered (as it appears) but it should line up and look like "YAML".

Or this :

the error message should all line up as it does in a console.

解决方案

Assuming the element which is floated and will be centered is a div with an id="content" ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

And apply the following CSS

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

这篇关于CSS:居中块，但将内容向左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文