如何让div居中但内部文本左对齐？HTML/CSS新手求助

核心问题是<center>标签会让内部所有元素继承text-align: center样式，你之前没把text-align: left正确加到div的样式里，所以文本还是居中。下面给你两种可行的解决方式：

方案一：使用CSS margin实现居中（推荐） #

<center>是HTML4的过时标签，现代前端更推荐用CSS实现块级元素的水平居中。直接删掉外层的<center>，给div添加margin: 0 auto;即可让div居中，文本默认就是左对齐（保险起见也可以显式加上text-align: left;）：

<div style="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 rgba(0, 0, 0, 0.8); margin: 0 auto; 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>标签，只需要在div的style属性里加上text-align: left;，就能覆盖<center>继承过来的居中样式：

<center>
  <div style="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 rgba(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>

内容的提问来源于stack exchange，提问作者ria