Designers vs. Programmers on Text Placement in Images

In a large online design community, a person shared an image of a graphic that was shown on the home page of the same community. The graphic contains two lines of text with information and a link to COVID-19 resources so that people can get accurate information instead of hype or conspiracy theories. The graphic also had a little icon of a pushpin in a circle. The original poster was bothered by the lack of alignment between the pushpin graphic and the two lines of text. The graphic is lower than the lines of text. They would like it to be vertically aligned. The notification box has ample room to do this.

One person replied to the original poster with a comment about the icon having an equidistant placement between the top and bottom parts of the box. This person said that alignment is proper and ideal. They added that from the baseline to bottom of the detail text is a large distance, which is what makes the icon look too low. This person went on to say that the measurement should equal to the card detail's baseline to bottom side of the card.

Another person added that aligning text in CSS is more complicated than it needs to be. They have created a collection of CSS rules to simplify the process. The individual shared a link to their rules so that the original poster could take a look. This person added that the Tape extension for Chrome is a good way to check the alignment of text in boxes when coding in CSS.

Someone else had a few thoughts to share about using a wrapper and single flex rule to make the text align better and without having to go through too many steps in CSS. Another person agreed with this, adding that flex boxes make this entire process faster and easier than one of the other commentators was implying. It seems that overall, the designers in the community think the graphic is not well-aligned with the text, and the programmers in the community believe that it is aligned. For more information click here https://i.redd.it/zwmopdu0w7d51.jpg.