Html 如何水平对齐`

`的并排

.allinside {
  display: flex;
  vertical-align: top;
}

.profile_part {
  background-color: #a7f996;
  border-radius: 25px;
  width: 18%;
  margin: 0 10px 0 10px;
  margin-right: auto;
}

.mid_part {
  background-color: #a7f996;
  border-radius: 25px;
  width: 70%;
  margin: 0 10px 0 10px;
  margin-left: auto;
}

.textinside {
  padding-bottom: 10px;
  text-align: center;
}

<div class="allinside">
  <div class="profile_part">
    <img id="mimi" src="img/profilepic.gif" alt="Maria" />
    <p class="textinside">Maria's choices</p>
  </div>
  <div class="mid_part">
    <h2>The last book I read:</h2>
    <img src="img/bravenewworld.jpg" alt="Brave new world" />
    <p class="textinside">SOME TEXT INSIDE</p>
    <h2>My favourite book:</h2>
    <img src="img/searchformeaning.jpg" alt="Man's search for meaning" />
    <p class="textinside">SOME TEXT INSIDE</p>
  </div>

.allinside{
}

.profile_part{
    background-color: #a7f996;
    border-radius: 25px;
    width: 18%;
    margin: 0 10px 0 10px;
    margin-right: auto;
    vertical-align:top;
    display:inline-block;

}

.mid_part{
    background-color: #a7f996;
    border-radius: 25px;
    width: 70%;
    margin: 0 10px 0 10px;
    margin-left: auto;
    display:inline-block;

}


.textinside{
    padding-bottom: 10px;
    text-align: center;
}

Html相关问答推荐

如何删除html原生对话框的宽度

我似乎不能正确地将我的导航栏居中'

如何使用html和css将两个项目垂直对齐

使用css第n个子元素，如何迭代Y组中的X个元素？

如何将CSS滤镜仅应用于背景图像

如何突破安莉得分

禁用所有行，但在16角中单击编辑按钮的行除外

根据Tailwind CSS中的子计数而非子宽度进行对齐，并水平对齐

在显示 swift ui 之前加载下一个 YouTube 视频

如何使用 Flutter 构建 Chrome 扩展？

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

理解图像与其内容框之间的关系

当悬停时，同时影响相邻的两侧div

CSS：第一个类型的伪类没有按预期工作

按钮显示：内联不换行

Css 左属性问题

Primeng浮动标签溢出管理

如何使用 css 将图像变成黑色并使文本出现在悬停时？

使用 bootstrap-icons 的未排序图标堆栈

如何将内容从侧边栏的底部移动到右侧？