让两个div横向排列 一个顶部一个居中

可以使用 flex 布局来实现这个需求。首先，将两个 div 包裹在一个父容器中，设置该父容器的 `display` 属性为 `flex`，并设置 `flex-direction` 为 `row`，即可让两个子元素横向排列。然后，将上方的 div 的 `align-self` 属性设置为 `flex-start`，即可将其置于顶部，将下方的 div 的 `align-self` 属性设置为 `center`，即可将其居中。

HTML 代码示例：

<div class="container">
  <div class="top">顶部</div>
  <div class="middle">居中</div>
</div>

CSS 代码示例：

.container {
  display: flex;
  flex-direction: row;
}

.top {
  align-self: flex-start;
}

.middle {
  align-self: center;
}

相关问题

怎么让一个图片横向居中在div

要让一个图片横向居中在div中，可以使用以下CSS代码：

div {
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
}

首先，在div元素中使用text-align属性将文本居中。然后，使用display属性将img元素设置为块级元素，并使用margin属性将其左右边距设置为auto，这将使其在div元素中水平居中。请注意，这将仅在该img元素的父元素具有text-align: center属性时起作用。

同一个box里两个div左右排列

可以使用 CSS 的 `float` 属性来实现两个 div 左右排列。具体实现步骤如下：

1. 在 HTML 中创建两个 div，分别为 `left-div` 和 `right-div`。
2. 使用 CSS 给这两个 div 设置宽度和高度，并使用 `float` 属性将 `left-div` 设置为左浮动，将 `right-div` 设置为右浮动。
3. 如果需要让两个 div 的高度一致，可以使用 `clearfix` 清除浮动，或者使用 CSS Flexbox 布局。

示例代码如下：

<div class="container">
  <div class="left-div">左侧内容</div>
  <div class="right-div">右侧内容</div>
</div>

.container {
  width: 100%;
  height: 200px;
}
.left-div {
  width: 50%;
  height: 100%;
  float: left;
  background-color: #ccc;
}
.right-div {
  width: 50%;
  height: 100%;
  float: right;
  background-color: #f00;
}

这样就可以让 `left-div` 和 `right-div` 左右排列了。