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`宽度有限，你需要考虑其他布局策略。

html两个div左右对齐

可以使用 CSS 的 float 属性来实现两个 div 左右对齐的效果。具体实现方法如下：

1. HTML 代码：

<div class="left"></div>
<div class="right"></div>

2. CSS 代码：

.left {
  float: left;
  width: 50%; /* 左侧 div 占 50% 的宽度 */
}

.right {
  float: right;
  width: 50%; /* 右侧 div 占 50% 的宽度 */
}

这样，两个 div 就可以左右对齐了。如果需要让两个 div 之间有一定的间隔，可以在 CSS 中设置 margin 或 padding 属性。