[分享]css与左边div并排居中

CSS是前端开发中必不可少的一部分，常常用来控制网页元素的样式和布局。在设计网页布局时，我们经常要将多个元素排列在一行，而且希望它们能够在页面上水平居中。下面我们来看一看如何使用CSS来实现这个效果。...

CSS是前端开发中必不可少的一部分，常常用来控制网页元素的样式和布局。在设计网页布局时，我们经常要将多个元素排列在一行，而且希望它们能够在页面上水平居中。下面我们来看一看如何使用CSS来实现这个效果。

首先，我们要创建两个div元素，一个放在左边，一个放在右边。代码如下：

<div id="left">
  <p>这是左边的文本内容</p>
</div>

<div id="right">
  <p>这是右边的文本内容</p>
</div> 

接下来，我们需要使用CSS来实现左边div和右边div并排居中的效果。实现这个效果，我们需要使用display属性和margin属性。具体代码如下：

#left {
  display: inline-block; /*将左边的div元素设置为行内块级元素*/
  margin-right: -4px; /*消除div之间的空白间隔*/
}

#right {
  display: inline-block; /*将右边的div元素设置为行内块级元素*/
  margin-left: -4px; /*消除div之间的空白间隔*/
}

/*将左边和右边的div元素居中*/
.container {
  text-align: center;
} 

这样，左边div和右边div就能够并排居中了。我们还可以添加其他CSS样式，如颜色、背景色、字体大小等等，来美化页面。使用CSS能够帮我们快速地创建出美观、实用的网页布局。