时间戳

首页 > 解决方案 > 如何控制独立于图像的跨度的垂直放置

css - 如何控制独立于图像的跨度的垂直放置

问题描述

我希望能够垂直移动跨度而不干扰图像

<hgroup>
            <img src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/cropped-45795044_561214090992995_7744636018275385344_n.jpg" class="header-image" width="25%" alt="sustainablewestonma">
            <span style="display:inline-block;width:65%;text-align: left;color:#538232;font-size: 3.5vw;"> Educate ● Initiate ● Collaborate</span>         
         
	   
</hgroup>

标签： cssvertical-alignment

解决方案

有几种方法可以得到你想要的！

  • Flexbox： 正确和最简单的方法之一是使用 flexbox，通过添加display: flex;到 span 的父元素并使用align-items属性及其相关值（例如centerorflex-start或）对齐它flex-end。我只是用下面的代码片段与你分享（别担心，我只是删除了内联 CSS 并将其添加为一个类以获得更好的分辨率）。

.group{
  display: flex;
  align-items: flex-start;
}

.span{
  display:inline-block;
  width:65%;
  text-align: left;
  color:#538232;
  font-size: 3.5vw;
}
<hgroup class="group">
     <img src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/cropped-45795044_561214090992995_7744636018275385344_n.jpg" class="header-image" width="25%" alt="sustainablewestonma">
     <span class="span"> Educate ● Initiate ● Collaborate</span>         
</hgroup>

  • 绝对位置： 您也可以position: absolute;像下面显示的那样添加到 span 元素中，并通过top属性控制 span 的垂直位置，您可以使用百分比或其他单位（如px ）设置它。

.span{
  display:inline-block;
  width:65%;
  text-align: left;
  color:#538232;
  font-size: 3.5vw;
  position: absolute;
  top: 20px;
}
<hgroup>
     <img src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/cropped-45795044_561214090992995_7744636018275385344_n.jpg" class="header-image" width="25%" alt="sustainablewestonma">
     <span class="span"> Educate ● Initiate ● Collaborate</span>         
</hgroup>

注意：请注意，当您要使用position: absolute;以避免其他元素溢出并突然进入您的<hgroup>分区时，您应该为您<hgroup>的图像高度设置一个最小高度。

  • 转换：最后一种方法是使用transform属性，translateY(*value*)其中值可以是任何数字，相关单位如px，您也可以在下面的代码片段中看到这一点。

.span{
  display:inline-block;
  width:65%;
  text-align: left;
  color:#538232;
  font-size: 3.5vw;
  transform: translateY(-20px);
}
<hgroup>
     <img src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/cropped-45795044_561214090992995_7744636018275385344_n.jpg" class="header-image" width="25%" alt="sustainablewestonma">
     <span class="span"> Educate ● Initiate ● Collaborate</span>         
</hgroup>

推荐阅读