Just want to note that I was googling, but for some reason, the methods offered in Russian and English (StackOverflow / Exchange) do not work in my case.

<div class="about"> <div class="name">Джон Доу</div> <div class="profile">Профиль</div> </div>

CSS:

 .about { width: 100%; height: 24px; line-height: 24px; } .name { float: left; } .profile { float: left; margin-left: 40px; } .profile:before { content: url("images/profile.png"); }

It is necessary to somehow center the image added verbally through :before .

.

As seen in the picture, the method proposed by Deonis shifts the picture down a bit, but it is still not centered vertically.

    2 answers 2

    If the image is added using a pseudo-class and relative to the content in its parent element, then you can do this:

     .profile:before { display: inline-block; vertical-align: middle; line-height: 1; content: url("images/profile.png"); }

    Addition to the comment. Feel the difference: in the first version, as you have in the second version, where the method proposed by me above is used.

     .about { width: 100%; height: 24px; line-height: 24px; margin-bottom: 10px; } .name { float: left; } .profile { float: left; margin-left: 40px; outline: 1px solid #999; } .profile:before { content: url("http://icons.iconarchive.com/icons/paomedia/small-n-flat/16/profile-icon.png"); } .variant2:before { display: inline-block; vertical-align: middle; line-height: 1; } 
     <div class="about"> <div class="name">Джон Доу</div> <div class="profile">Профиль</div> </div> <div class="about"> <div class="name">Джон Доу</div> <div class="profile variant2">Профиль</div> </div>

    • It is necessary regarding the content in the element with the class profile. Your current answer, unfortunately, does not solve the problem. Icon as hung above, and hangs. - user64675
    • @ user64675, added in the answer - Deonis
    • Wrong, there really is a result, but as you can see when executing your code, it’s still not centering strictly in the middle of the vertical, this is a small indent: / - user64675
    • @ user64675, I didn’t measure it with a ruler, but I know that the human eye is definitely not suitable for accurate measurements. Take the example of a bigger one . - Deonis
    • Ok, I will clarify, the picture is smaller in height than 24px. And there, just, that is the problem with the fact that the alignment is not complete. - user64675 6:18 pm

    .profile - float, therefore vertical-align: middle will not work. Options: 1. Increase the left indent and hang the picture on the absolute:

     .profile { float: left; margin-left: 60px; position: relative; } .profile:before { content: ""; display: block; width: 20px; height: 20px; background-image: url("images/profile.png"); background-size: cover; position:absolute; right: 100%; top: 50%; transform: translatey(-50%); }
    2. Add a child element:

     .about { width: 100%; height: 24px; line-height: 24px; } .name { float: left; } .profile { float: left; margin-left: 40px; } .child { display: inline-block; vertical-align: middle; } .child:before { content: url("images/profile.png"); display: inline-block; vertical-align: middle; } 
     <div class="about"> <div class="name">Джон Доу</div> <div class="profile"> <div class="child">Профиль</div> </div> </div>