CSS —— 实现一行文字居中、两行或多行文字左对齐
warning:
这篇文章距离上次修改已过187天，其中的内容可能已经有所变动。
要实现一行文字居中，两行或多行文字左对齐的效果，可以使用CSS的flexbox或者grid布局。以下是使用flexbox实现的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Line Center, Multi Line Left Align</title>
<style>
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.text {
display: flex;
flex-direction: column;
align-items: flex-start; /* 左对齐 */
text-align: left; /* 保证文本左对齐 */
}
</style>
</head>
<body>
<div class="container">
<div class="text">
<p>单行文本居中。</p>
<p>第一行第二行文本左对齐，保持左对齐。</p>
<p>更多文本...</p>
</div>
</div>
</body>
</html>在这个例子中，.container 是一个flex容器，它使得 .text 内的内容在水平和垂直方向上居中。.text 是一个flex容器，其方向是列，这样所有的文本都是按照列来排列的，第一行在最上面，可以实现左对齐。
评论已关闭