CSS Image positioning

Hi All,
I am working on creating a series of alert banners for our Help Centers site and wanted to get your thoughts on the CSS positioning used. Noticed that I didn’t convert my img to a block level element. Should I? Please see below:

.newpage_alert {
font-size: 16px;
font-family: sans-serif;
font-weight: 400;
text-align: center;
line-height: 25px;
border: 1px solid #1a76bc;
max-width: 700px;
border-radius: 6px;
padding: 12px 18px 12px 18px;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,.14);
align-items: center;
/* margin-left: auto;
margin-right: auto;*/
margin-top: 5px;
margin-bottom: 20px;
background-color: #f2f2f2;
text-align: left;

.newpage_alert img {
width: 20px;
padding-right: 5px;


.newpage_alert img {
position: relative;
top: 4px;

Normally if you need img to behave as a block you still shouldn’t make it block, but rather wrap it in block element, like div, so it’s totally fine! Regarding rest of the rules:

.newpage_alert img {
  width: 20px; /* If you use square icons then you might also want to indicate height */
  padding-right: 5px; /* Prefer margin-right to push something that's outside */
  position: relative; 
  top: 4px; /* This is unstable */

The last one bothers me a bit as browsers nowadays do all sort of modifications with fonts and here you basically depend on certain font size with certain baseline…

I appreciate the response and feedback provided. In my HTML, the is nested in a

and not wrapped in a

. Based on your experience, do you recommend wrapping images in a
when positioning an element?

Can you elaborate more on your last comment related (top: 4px; /* This is unstable */)?


Yes, wrapping an image in correct way gives you ability to switch image or reuse component without getting worried about aspect ratio.

Here you’re pushing image down 4px so it looks centered. What if you/your boss later wants to increase/decrease font size, or user will use browser extension that will change font size or font face?

Makes sense. What do you recommend I do instead to ensure the image is centered with the text? ::before? float?