html - 如何将一张图片放在左边,另一张图片放在一行的中央?

标签 html css

我正在制作登录屏幕,但很难找到一种解决方案来查看左侧的 image 1 和中心的 image 2。它总是彼此相邻结束,或者图像位于我想要的位置但不在同一行。

img.logo2 {
  display: inline-block;
}
img.roc1 {
  display: inline-block;
  width: 250px;
  height: 125px;
}
header {
  background-color: rgba(255, 0, 0, 0.7);
}
<header>
  <img src="../styles/roc.png" class="roc1">
  <img src="../fts.PNG" class="logo2">
</header>

最佳答案

你需要的是使用 absolute 定位和 text-align: center 是可行的,请看这个片段作为例子:

img.logo2 {
  display: inline-block;
}
img.roc1 {
  display: inline-block;
  width: 250px;
  height: 125px;
  position: absolute;
  top: 0;
  left: 0;
}
header {
  background-color: rgba(255, 0, 0, 0.7);
  position: relative;
  text-align: center;
  height: 125px;
}
<header>
  <img src="../styles/roc.png" class="roc1">
  <img src="../fts.PNG" class="logo2">
</header>

关于html - 如何将一张图片放在左边,另一张图片放在一行的中央?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41652963/

相关文章:

html - Internet Explorer 在 textareas 中包装的单词与 div 不同

javascript - JQuery:滚动图像

javascript - 在没有输入必填字段的情况下提交联系表 7 后如何防止重定向到某个 URL

html - 优先考虑 CSS 类?

css - 如果我在 .css 文件中的更改没有反射(reflect)在我的元素输出中怎么办?

html - 如何更改YouTube订阅小部件的显示属性?

html - 使用 Bootstrap 拉伸(stretch)图像和居中内容

javascript - 如何使用javascript将Toggle down div更改为右左幻灯片

html - 使用 CSS 我应该使用 p 标签来包装文本还是 div 就足够了?

css - 使用 zurb foundation gem 与在 Windows 上使用 sass standalone 有什么优势?