我需要把两个textarea内嵌并居中。然而，我找不到一个方法，使他们并排后，中心。有什么办法可以让我做吗?
<!DOCTYPE html>
<html>
<head>
<style>
.inline-div {
display: inline-block;
}
</style>
</head>
<body>
<div class="inline-div">
<p align="center">Input:</p>
<textarea id="display_new_language"></textarea>
</div>
<div class="inline-div">
<p align="center">Information:</p>
<textarea id="display"></textarea>
</div>
</body>
</html>Add Parentdivcsstext-align:center如下所示:
.inline-div {
display: inline-block;
}
.center-div {
text-align: center;
}<div class="center-div">
<div class="inline-div">
<p align="center">Input:</p>
<textarea id="display_new_language"></textarea>
</div>
<div class="inline-div">
<p align="center">Information:</p>
<textarea id="display"></textarea>
</div>
</div>尝试使用flexbox。创建一个包装器div(在本例中为body元素)，并使用以下CSS:
body{
display:flex;
justify-content:center;
}
注意:使用这种方法，您不需要在.inline-div元素上使用inline-block属性。
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content:center;
}
</style>
</head>
<body>
<div class="inline-div">
<p align="center">Input:</p>
<textarea id="display_new_language"></textarea>
</div>
<div class="inline-div">
<p align="center">Information:</p>
<textarea id="display"></textarea>
</div>
</body>
</html>就像我提到的，您可以在.inline-div周围创建一个包装器div(如果您不想直接在body上设置flex属性)。
HTML:
<main class="flexWrapper">
<div class="inline-div">
<p align="center">Input:</p>
<textarea id="display_new_language"></textarea>
</div>
<div class="inline-div">
<p align="center">Information:</p>
<textarea id="display"></textarea>
</div>
</main>
CSS:
.flexWrapper{
display: flex;
justify-content:center;
}