Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by YE YUAN
YE YUAN
1,230 Points

How to make the position of arrow icon centre-bottom?

I tried to position the arrow icon on centre-bottom, however, the method I used was to modify the value of its margin. As a result, the value is too high. I consider that there must have some other simple way to achieve this change. Could you help me and thanks a lot.

The following is my code:

<div class="primary"> <h1 class="mel">Melbourne, Amazing City</h1> <img class="arrow" src="img/arrow.svg" alt="down arrow"> </div>

/******************************
GNERNAL
******************************/

body {
  font-family:'Open Sans', sans-serif;
}

a {
  text-decoration:none;
}

img {
  width:100%;
}


/******************************
BODY
******************************/

.primary {
  background-image:url('../img/melbourne1.jpg');
  background-size:cover;
  height:600px;
  width:100%;
  text-align:center;
}

.mel {
  color:#fffaf0;
  text-transform:uppercase;
  padding-bottom:50px;
}

.arrow {
  width:50px;
  margin-top:300px;
}
Ravi Challa
Ravi Challa
7,036 Points

Hi

Can you try making the margin-top as 150px, hopefully helps..

2 Answers

Vitor Freitas
Vitor Freitas
3,579 Points
Vitor Freitas
Vitor Freitas
3,579 Points

You can do this in two nice ways.

1 - If you have a fixed width, set display: block, and margin left, right : auto;

2 - Define a position, like relative, set left: 50% and transform: translateX(-50%);

The second will move to the left 50% and bring back left half of the width of the element.

Example here

YE YUAN
YE YUAN
1,230 Points

Thanks for your kind suggestion.

I tried these two methods, but I still cannot get the optimal result.

  1. If I use the first method, indeed, the icon is positioned on the centre but not at the bottom. I see that the value of margin-top you set is "100px", whether we have to set the higher value to for example "300px" to move the position of icon to the bottom. Basically I have not ever seen this high value of margin.

  2. The second method seems fail to decrease the size of icon, the image is still too large

could you help check, thanks again!!

Vitor Freitas
Vitor Freitas
3,579 Points
Vitor Freitas
Vitor Freitas
3,579 Points

I'm not on a computer, so I'll try to give you an ideia. You can use position absolute and set bottom to 0. That, with the second way, will set the arrow at center/bottom.

YE YUAN
YE YUAN
1,230 Points

Thanks Vitor, the issue is solved by reseting the bottom value and changing the position to absolute.

I am curious about the code: -webkit-transform:translateX(-50%); transform:translateX(-50%);

could you help explain its function, thank you.

YE YUAN
YE YUAN
1,230 Points

I just checked W3C and understand it, very appreciate your assistance :)