【问题标题】:Trying to align an image to the right middle of a column in bootstrap尝试将图像对齐到引导程序中列的右侧中间
【发布时间】:2018-05-31 22:14:43
【问题描述】:

我正在尝试将引导列中的图像向右对齐,并让文本在左侧环绕它,如下所示:https://codepen.io/freeCodeCamp/full/YqLyXB

我整天都在研究 flexbox 和垂直对齐,而不是做我的工作(哎呀),我觉得是时候问问专家了。这是我的样子: https://codepen.io/Seaplush/pen/rKVLmX

.col2 img{
max-width: 100%;
  height: 50%;
  float: right;
}


  .col2{
  background-color: #cccccc;
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
 }

感谢您的帮助,这是我第一次尝试网站,如果浏览起来有点混乱,非常抱歉;)

【问题讨论】:

    标签: css image bootstrap-4 css-float vertical-alignment


    【解决方案1】:

    您可以使用引导列。只需阅读并了解有关 Bootstrap 网格的更多信息。

    请阅读以下链接:

    https://getbootstrap.com/docs/4.0/layout/grid/

    https://getbootstrap.com/docs/4.0/layout/overview/

    【讨论】:

    • 谢谢,我重新阅读了网格布局文档并意识到修复是多么简单,只需将图像放在文本旁边的自己的列中,它看起来好多了。
    【解决方案2】:

    如果你使用引导程序,为什么不使用引导程序网格布局呢?

    但是如果你尝试使用弹性盒子,这是一些提示......

    1. 你应该设置文字和图片的宽度...

    2. 将这两个元素的父元素设置为 flex,并设置对齐内容。

    示例:

    .parent{ display:flex; align-content:space-around; }

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-04-21
      • 1970-01-01
      • 2018-05-04
      • 2021-11-21
      • 2021-06-21
      • 1970-01-01
      • 2021-01-05
      • 2016-10-29
      相关资源
      最近更新 更多