how to control vertical placement of span independent of image

Question

I would like to be able to move the span vertically without disturbing the image

<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>

no, that's not what I'm asking. That just centers the text vertically. I want to be able to control how far up or down I want to place the text — DCR, Aug 11 '19 at 20:28
then use `position:relative;bottom:Apx` and adjust the A value like you want — Temani Afif, Aug 11 '19 at 20:40

SMAKSS · Answer 1 · 2019-08-11T22:09:58.753

There are several approaches to get what you wanted!

Flexbox: One of the proper and easiest way to do this is using flexbox by adding display: flex; to the parent element of the span and align it using align-items attribute and its related values such as center or flex-start or flex-end. I just share it with you with the snippet code below (don't be worry I just deleted the inline CSS and add it as a class for better resolution).

.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>

Absolute Position: You can also do this with adding position: absolute; to the span element like I showed below, and control the vertical position of span by top attribute, you can set it with percentage or other units like 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>

NOTE: just note that when you going to use position: absolute; to avoid other elements get overflowed and suddenly come to your <hgroup> division you should set a minimum height for your <hgroup> like your image height.

Transform: the last approach is to use transform attribute with translateY(*value*) where the value can be any number with the related unit such as px, you can see this also in the code snippet below.

.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>

nice suggestions but I'm amazed at how everyone makes this so complicated. see my answer — DCR, Aug 12 '19 at 02:10
Yes, giving `margin` or `padding` attribute will do the work for you here, but in case you want it to be responsive in all devices you should add media and define a proper situation for each of them. — SMAKSS, Aug 12 '19 at 13:18

score 0 · Answer 2 · answered Aug 11 '19 at 20:54

0

You can try to change the position with padding or margin. For you don't need to use "position". Try this:

padding-top: 10px;

answered Aug 11 '19 at 20:54

Bob Farias

65
6

score 0 · Answer 3 · answered Aug 12 '19 at 02:22

adjust margin-top on span to adjust height as needed

span{
margin-top:2.5%;
float:left;

}
img{float:left}

<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:block;width:70%;text-align: left;color:#538232;font-size: 3.5vw;"> Educate ● Initiate ● Collaborate</span>         
         
    
</hgroup>

how to control vertical placement of span independent of image

3 Answers3