时间戳

首页 > 解决方案 > 将图像与右中 html 对齐

html - 将图像与右中 html 对齐

问题描述

它应该是什么样子的示例：

我只是让它要么去最右边，要么去最左边。有没有什么简单的方法可以在中心和右边之间得到它？

编辑：代码（将代码放在https://hasteb.in/iyireyeb.xml以便我可以编辑它）

.row {
    display: table-cell;
    vertical-align: middle;
}

* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left, .right {
  width: 25%;
}

.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
<div class="row">
  <div class="column left" style="background-color:#27272e;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column middle" style="background-color:#27272e;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column right" style="background-color:#27272e;">
    <img src="bg.jpg" alt="img">
  </div>
</div>

标签： htmlcss

解决方案

根据您的代码，我刚刚添加了下面的 CSS 以将您的图像正确大小设置到右列：

.right{
  display:flex;
}
.right img{
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

演示

.row {
    display: table-cell;
    vertical-align: middle;
}

* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left, .right {
  width: 25%;
}

.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.right{
  display:flex;
}
.right img{
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
<div class="row">
  <div class="column left" style="background-color:#27272e;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column middle" style="background-color:#27272e;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column right" style="background-color:#27272e;">
    <img src="https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg" alt="img">
  </div>
</div>

推荐阅读