时间戳

首页 > 解决方案 > 对齐文本和图像

html - 对齐文本和图像

问题描述

我是 HTML 新手，我正在尝试对齐我的测试和图像，以便它们彼此相邻。

我希望文本在左侧，图像在右侧。

#main {
  border: 1px solid black;
  margin: 20px 20px
}

h3.main {
  margin: 5px 5px 10px 5px
}

p.main {
  margin: 0px 5px 0px 5px
}

p.left {
  vertical-align: middle;
}

img.main {
  width: 50%;
  height: 100%;
}

img.right {
  vertical-align: middle;
}
<div id="main">
  <h3 class="main">About Us!</h3>
  <p class="main left">Short Bio</p>
  <img src="img/code.jpg" class="main right">
</div>

标签： htmlcss

解决方案

默认情况下会使用flex和对齐，并且我已经删除了不必要的代码以使其简单。

#main {
  display: flex;
}

.text {
  display: flex;
  flex-direction: column;
}

.main,
.left {
  width: 100px;
}

#main img {
  height: 100px;
  width: 100px;
}
<div id="main">
  <div class="text">
    <h3 class="main">About Us!</h3>
    <p class="main left">Short Bio</p>
  </div>
  <img src="http://placekitten.com/301/301" class="main right">
</div>

推荐阅读