css中两个div水平对齐

要让两个div水平对齐，可以使用CSS中的flexbox布局或者inline-block属性。

使用flexbox布局可以将两个div包裹在一个父容器内，设置父容器为display: flex;，然后设置子元素的align-items属性为center来实现水平对齐。代码如下：

.container {
  display: flex;
  align-items: center;
}

.box1, .box2 {
  /* 设置宽度 */
  width: 50%;
}

使用inline-block属性也可以实现两个div水平对齐，只需要将两个div设置为inline-block属性，然后设置它们的vertical-align属性为top即可。代码如下：

.box1, .box2 {
  display: inline-block;
  vertical-align: top;
  /* 设置宽度 */
  width: 50%;
}

相关问题

css 两个div对齐居中

在CSS中，让两个`<div>`元素水平居中并紧靠在一起可以采用几种方法，这里提供一种常见的方法：

1. 使用Flexbox布局：

.container {
  display: flex; /* 创建弹性盒模型 */
  justify-content: center; /* 水平居中 */
}

.div1, .div2 {
  flex: 1; /* 自适应宽度 */
}

在这个例子中，`.container`包含两个`.div1`和`.div2`，它们会自动平均分配剩余空间并在水平方向上居中。

2. 或者使用Grid布局：

.container {
  display: grid;
  place-items: center; /* 居中内容行和列 */
}

.div1, .div2 {
  /* 如果需要指定宽度，添加相应的样式 */
}

如果只想要简单的文本居中，也可以直接给每个`div`设置内边距和`text-align`属性：

.div1, .div2 {
  margin: auto auto; /* 上下左右都设为auto，让div自适应容器中心 */
  text-align: center; /* 文本水平居中 */
}

请注意，这三种方法假设`.container`有足够的宽度来容纳这两个`div`。如果`.container`宽度有限，你需要考虑其他布局策略。

div中两个元素居中对齐

可以使用flex布局来实现两个元素在div中居中对齐。具体的实现方式如下：

HTML代码：

<div class="container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

其中，`display: flex;`将容器设置为flex布局；`justify-content: center;`将子元素在水平方向上居中对齐；`align-items: center;`将子元素在垂直方向上居中对齐。这样就可以实现两个元素在div中居中对齐的效果。