提问人：ria 提问时间：7/24/2023 最后编辑：Roko C. Buljanria 更新时间：7/24/2023 访问量：79
我怎样才能使这个 div 居中而不使文本居中？我希望它左对齐
How can I make this div centered without also centering the text? I want it to be left aligned
问：
我是 HTML/CSS 的初学者，我正在磕磕绊绊地构建自己的 Neocities 网站。我能够通过将 div 放在它的上方和下方来使它居中，但（可以理解）文本也居中。
这是我的代码：
<center>
<div style="width:1000px;height:150px;border:1px solid blue;overflow:scroll;padding:15px 25px 15px 25px;background-color:#A2E4B8;color:#000000;scrollbar-base-color:#DEBB07;box-shadow: 7px 7px rgb(0, 0, 0, 0.8);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Fringilla urna porttitor rhoncus dolor purus. Id
venenatis a condimentum vitae. Scelerisque in dictum non consectetur a erat nam. Ultrices eros in cursus turpis. Facilisi cras fermentum odio eu feugiat. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Amet luctus venenatis lectus
magna. Nibh nisl condimentum id venenatis a. Nec dui nunc mattis enim ut tellus. At risus viverra adipiscing at in tellus integer. Placerat vestibulum lectus mauris ultrices. Semper viverra nam libero justo laoreet.
</div>
</center>我尝试使用text-align： left;但这并没有产生结果。我确信我做错了什么，但我对那是什么感到非常迷茫。
答：
0赞
Brett Donald
7/24/2023
#1
将左边距和右边距设置为自动。
.d1 {
margin: 0 auto;
width: 50%;
height: 150px;
border: 1px solid blue;
overflow: scroll;
padding: 15px 25px 15px 25px;
background-color: #A2E4B8;
color: #000000;
scrollbar-base-color: #DEBB07;
box-shadow: 7px 7px rgb(0, 0, 0, 0.8);
}<div class="d1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Fringilla urna porttitor rhoncus dolor purus. Id venenatis a condimentum vitae. Scelerisque in dictum non consectetur a erat nam. Ultrices eros in cursus turpis. Facilisi cras fermentum odio eu feugiat. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Amet luctus venenatis lectus magna. Nibh nisl condimentum id venenatis a. Nec dui nunc mattis enim ut tellus. At risus viverra adipiscing at in tellus integer. Placerat vestibulum lectus mauris ultrices. Semper viverra nam libero justo laoreet.</div>进一步阅读 这里.
0赞
veresZoltan
7/24/2023
#2
您应该避免使用“center”标签，因为它在 HTML5 中已弃用。相反，请使用 CSS 将 div 容器居中。
我使用“style”标签直接在“head”部分添加了 CSS 样式，但您可以在外部 css 文件中使用它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center div with flex</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.content-container {
width: 1000px;
height: 150px;
border: 1px solid blue;
overflow: scroll;
padding: 15px 25px;
background-color: #A2E4B8;
color: #000000;
scrollbar-base-color: #DEBB07;
box-shadow: 7px 7px rgb(0, 0, 0, 0.8);
text-align: left; /* Align the text to the left */
}
</style>
</head>
<body>
<div class="content-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Fringilla urna porttitor rhoncus dolor purus. Id venenatis a condimentum vitae. Scelerisque in dictum non consectetur a erat nam. Ultrices eros in cursus turpis. Facilisi cras fermentum odio eu feugiat. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Amet luctus venenatis lectus magna. Nibh nisl condimentum id venenatis a. Nec dui nunc mattis enim ut tellus. At risus viverra adipiscing at in tellus integer. Placerat vestibulum lectus mauris ultrices. Semper viverra nam libero justo laoreet.
</div>
</body>
</html>我在身体上使用了 flexbox 来水平和垂直居中内容。div 元素有一个类名“.content-container”，通过使用“text-align： left;”，它将“div”中的文本向左对齐，同时将整个“div”保持在页面上的中心。
或者，如果您不想设置正文元素的样式，这里有另一种方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center div with margin</title>
<style>
.content-container {
margin: 0 auto;
width: 1000px;
height: 150px;
border: 1px solid blue;
overflow: scroll;
padding: 15px 25px;
background-color: #A2E4B8;
color: #000000;
scrollbar-base-color: #DEBB07;
box-shadow: 7px 7px rgb(0, 0, 0, 0.8);
text-align: left;
}
</style>
</head>
<body>
<div class="content-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Fringilla urna porttitor rhoncus dolor purus. Id venenatis a condimentum vitae. Scelerisque in dictum non consectetur a erat nam. Ultrices eros in cursus turpis. Facilisi cras fermentum odio eu feugiat. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Amet luctus venenatis lectus magna. Nibh nisl condimentum id venenatis a. Nec dui nunc mattis enim ut tellus. At risus viverra adipiscing at in tellus integer. Placerat vestibulum lectus mauris ultrices. Semper viverra nam libero justo laoreet.
</div>
</body>
</html>在这里，类名为“.content-container”的 div 使用 “margin： 0 auto;” 水平居中，其中的文本使用 “text-align： left;” 属性向左对齐。
0赞
journpy
7/24/2023
#3
尝试text-align:left !important;
评论
1赞
ria
7/25/2023
text-align 确实有效！考虑到中心标签已被弃用，我一定会测试其他人的答案
0赞
Aman
7/24/2023
#4
``<center>
<div
style="
width: 1000px;
height: 150px;
border: 1px solid blue;
overflow: scroll;
padding: 15px 25px 15px 25px;
background-color: #a2e4b8;
color: #000000;
scrollbar-base-color: #debb07;
box-shadow: 7px 7px rgb(0, 0, 0, 0.8);
text-align: left;
"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<br /><br />Fringilla urna porttitor rhoncus
dolor purus. Id venenatis a condimentum vitae. Scelerisque in dictum non
consectetur a erat nam. Ultrices eros in cursus turpis. Facilisi cras
fermentum odio eu feugiat. Pellentesque dignissim enim sit amet
venenatis urna cursus eget nunc. Amet luctus venenatis lectus magna.
Nibh nisl condimentum id venenatis a. Nec dui nunc mattis enim ut
tellus. At risus viverra adipiscing at in tellus integer. Placerat
vestibulum lectus mauris ultrices. Semper viverra nam libero justo
laoreet.
</div>
</center>``
评论