css 文字没有左对齐

Question

我有一个 div（出现在网格中），我正在其中显示一些文本。我希望文本左对齐，所以我将文本对齐设置为左对齐。但是，这是行不通的。文字默认是居中对齐的，我怎么弄都不行，左对齐。

我到底做错了什么？

代码：

function BookPage(props) {
    return (
        <div>
            <TabBar />
            <div className="grid-container">
                <div className="book-description">
                    <img src={userImage} alt="" />
                    <div className="content">
                        <h2>Game of Thrones</h2>
                        <p>George R.R. Martin</p>
                        <p>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.</p>
                    </div>
                </div>
                <div className="book-detail">heh</div>
            </div>
        </div>
    )
}

css:

.grid-container {
  margin-left: 15%;
  margin-right: 15%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 500px;
}

.book-description {
  grid-column: 1 / span 2;
  background-color: red;
}

.content {
  text-align: start;
}

.book-detail {
  grid-column: 3 / 3;
  background-color: blue;
}

Answer 1

text-align 属性需要设置为显示内容的确切标签。您可以在当前 css 中通过以下两种方式之一执行此操作：

.content h2, .content p {
    text-align: left;
}

或者您可以创建一个新的 class 并将 class 直接赋给 h2 和 p 标签，例如：

.alignLeft {
    text-align: left;
}

css 文字没有左对齐

css text not aligning to the left

css

grid

reactjs