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

Align image to be centred with one line of text, but then top aligned when there's more lines – Html

When there’s only one line of text, then I want the icon to be aligned in the centre, which is what I have achieved, however what I need to achieve now is when there’s more than one line (resizing the screen), the icon should be aligned at the top. Any ideas how I can achieve this without media queries, as the content inside the p tag will be different each time.

p {
  margin: 0;
}

.rounded-container {
  display: block;
  position: relative;
  padding: 14px;
  border: 1px solid black;
  border-radius: 14px;
  padding-left: 60px;
  background: yellow;
}

.rounded-container[data-icon-name="account"]::before {
  position: absolute;
  left: 14px;
  top: 0;
  content: "";
  width: 40px;
  height: 100%;
  background-image: url('https://svgshare.com/i/qKT.svg');
  background-repeat: no-repeat;
  background-position: center;
}
<div class="rounded-container" data-icon-name="account">
  <p>Please login into your account to see your paperless statements</p>
</div>
Tags:

2

Answers


  1. 0

    You have set the icon to have 100% of container height, meaning that it can never reach top when there are more lines (because you centered your icon with background tags), simply change its height to, for example, height: 40px; so you will have:

    .rounded-container[data-icon-name="account"]::before {
  position: absolute;
  left: 14px;
  top: 0;
  content: "";
  width: 40px;
  height: 40px;
  background-image: url('https://svgshare.com/i/qKT.svg');
  background-repeat: no-repeat;
  background-position: center;
}

    Note that now it is at the very top, you might need to add so pixels to the top property to align it with the text. top: 10px looks fine to me.

    Login or Signup to reply.
  2. 0

    You can simply add an event listener which listens for window resize and compare the height of each paragraph against a pre-defined constant value when the paragraph text does not break into two lines.

    If you find such paragraph, you simply toggle a class for which you have pre-defined styles in your CSS, and walla, its done. Here is MY solution. This should work out of the box, the only thing you might need to change is the reference, which may vary but that is solvable (you can see how the reference changes based on the window width).

    JavaScript:

    const reference = 22 // How many pixels the paragraph occupies when not braking into a new line. Change this in your case according to your paragraph.
const paragraphs = document.querySelectorAll(".rounded-container > p")
window.addEventListener("resize", () => {
    for (let i = 0; i < paragraphs.length; ++i) {
        if (paragraphs[i].clientHeight > reference) paragraphs[i].classList.add("toggled")
        else if (paragraphs[i].clientHeight <= reference && paragraphs[i].parentElement.classList.contains("toggled")) paragraphs[i].parentElement.classList.remove("toggled")
    }
})

    CSS:

    .toggled.rounded-container[data-icon-name="account"]::before {
    top: calc(-50% + 30px);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search