Problem z wycentrowaniem w pionie.

0

Witam.

Próbuję zrobić dymek informacyjny, w którym będzie z lewej strony ikonka, a z prawej tekst. Tekstu jest czasem na jedną, czasami na cztery linijki. Chciałbym aby obrazek i tekst były wycentrowane w pionie.

.contentHelp {
    font-size: 8pt;
    padding: 10px 17px;
    line-height: 10pt;
    background-color: #dfdfdf;
    height: 32px;
}

.contentHelp img {
    float: left;
    margin: 0 15px 15px 0;
}
<div class="contentHelp">
    <img src="help.png" alt="">
    <p>jakies tekst</p>
</div>

Próbowałem zrobić myk z display: table-cell i vertical-align: middle, ale nie chce współpracować.

2

jeżeli znasz wymiar .contentHelp to jesteś w domu

.contentHelp>img, .contentHelp>p {
  display: inline-block;
  vertical-align: middle;
}
.contentHelp>p {
  width: 300px; /* wymiar kontenera - wymiar obrazka - jakis margines, który ustawisz */
}

Uwaga!! Nie wstawiaj żadnego białego znaku (spacja, nowa linia) pomiędzy <img />, a <p>!!

0

Dzięki za fatygę, ale stwierdziłem, że to zbyt skomplikowane i przeniosłem obrazek w CSS jako background i wypozycjonowałem przy uzyciu left center.

1 użytkowników online, w tym zalogowanych: 0, gości: 1