Question 212309 in Html Question posted in
Some basic documentation can be found here.

How do I stop text from moving an image down in CSS and HTML?

I need the text just right above the image, like a little title.

I am trying to position text above an image, but every time I use margin-top: ###px the image moves down as well. They aren’t in the same div element, so why is this happening and how can I fix it?

I kept trying to move the text down using margin-top, but it also moved the image down and I don’t know where to go from there.

.column img {
  width: 25%;
  margin-top: 150px;
  margin-left: 150px;
  margin-right: 160px;
  transition: transform .2s;
}

.column img:hover {
  transform: scale(1.1);
}

.column h2 {
  margin-left: 0px;
  font-family: 'Montserrat', sans-serif;
  margin-top: 100px;
}

.column img {
  width: 25%;
  transition: transform .2s;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.column {
  flex: 25%;
  padding: 10px;
  text-align: center;
}

.titles h2 {
  margin-left: 300px;
}
<div class="titles">
  <h2>Lonoke, AR</h2>
</div>

<div class="row">
  <div class="column">
    <img src="https://via.placeholder.com/300x100" alt="A field" style="width: 50%" />
  </div>

  <div class="column">
    <img src="https://via.placeholder.com/300x100" alt="A forest" style="width: 50%" />
  </div>
</div>
Tags:

3

Answers


  1. 0

    You have this rule:

    .column img {
    width: 25%;
    margin-top: 150px;
    margin-left: 150px;
    margin-right: 160px;
    transition: transform .2s;
}

    margin-top: 150px; is what’s separating your title from the images. Play with that value or just remove it .

    Login or Signup to reply.
  2. 0

    It’s a bit unclear what your goal is from your question, but if you want the resizing of the title to be separated from the resizing of the images under it, you can use position: absolute; as I’ve done below. On either the title, the images, or both.

    This will effectively layer the objects on top of each other, instead of having them flow one after the other, as you’ve observed they are doing now.

    .column img {
  width: 25%;
  margin-top: 150px;
  margin-left: 150px;
  margin-right: 160px;
  transition: transform .2s;
}

.column img:hover {
  transform: scale(1.1);
}

.column h2 {
  margin-left: 0px;
  font-family: 'Montserrat', sans-serif;
  margin-top: 100px;
}

.column img {
  width: 25%;
  transition: transform .2s;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.column {
  flex: 25%;
  padding: 10px;
  text-align: center;
}

.titles h2 {
  position: absolute;
  margin-left: 300px;
}
    <div class="titles">
  <h2>Lonoke, AR</h2>
</div>

<div class="row">
  <div class="column">
    <img src="https://via.placeholder.com/300x100" alt="A field" style="width: 50%" />
  </div>

  <div class="column">
    <img src="https://via.placeholder.com/300x100" alt="A forest" style="width: 50%" />
  </div>
</div>
    Login or Signup to reply.
  3. 0

    I think I understand your requirement. You need to give margin-top to the text but not the image to bring both of them together and .column h2 doesn’t select anything so I hide it and added the font to the correct selector which is .titles h2

    .column img {
  width: 25%;
  /* margin-top: 150px; */
  margin-left: 150px;
  margin-right: 160px;
  transition: transform .2s;
}

.column img:hover {
  transform: scale(1.1);
}

/* .column h2 {
  margin-left: 0px;
  font-family: 'Montserrat', sans-serif;
  margin-top: 100px;      
} */

.column img {
  width: 25%;
  transition: transform .2s;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.column {
  flex: 25%;
  padding: 10px;
  text-align: center;
}

.titles h2 {
  font-family: 'Montserrat', sans-serif;
  margin-left: 300px;
  margin-top: 150px;
  margin-bottom: 0;
}
    <div class="titles">
  <h2>Lonoke, AR</h2>
</div>

<div class="row">
  <div class="column">
    <img src="https://via.placeholder.com/300x100" alt="A field" style="width: 50%" />
  </div>

  <div class="column">
    <img src="https://via.placeholder.com/300x100" alt="A forest" style="width: 50%" />
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search