本文主要是介绍前端将两个div在一个长为500px，高为300px的div里面并列居中对齐。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前端将两个div在一个长为500px，高为300px的div里面并列居中对齐。
要实现将两个 div 元素放置在一个长为500px，高为300px的父 div 中，一个在左边，一个在右边，并且居中对齐，可以使用Flexbox布局来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Layout Example</title>
<style>
.container {display: flex;width: 500px;height: 300px;justify-content: center;
}.left-div {width: 50%;height: 100%;background-color: lightblue;
}.right-div {width: 50%;height: 100%;background-color: lightcoral;
}
</style>
</head>
<body>
<div class="container"><div class="left-div">Left Div</div><div class="right-div">Right Div</div>
</div>
</body>
</html>
在这个示例中：
(1)我们使用Flexbox布局将父 div 设置为 display: flex; ，这样它的子元素会在水平方向上排列。
(2) 通过 justify-content: center; 属性，我们将子元素居中对齐。
(3)左侧 div 和右侧 div 各占父 div 宽度的50%，从而实现一个在左边，一个在右边的布局。
(4) 左侧 div 的背景颜色为淡蓝色，右侧 div 的背景颜色为淡珊瑚色。
这篇关于前端将两个div在一个长为500px，高为300px的div里面并列居中对齐。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
