Stworzenie menu RWD z <li> w którym jest image

Dla specjalistów Webmastering
#1

Witam

Potrzebuje stworzyć menu RWD gdzie

  • będzie zawierało obrazek z lewej strony (miniaturkę) chciałbym aby wszystko było w jednej linii i wyglądało estetycznie 
    <div id="collapseContainers">
<div id="mobile" class="collapse">
    <ul id="menu">

        <li>
            <strong>
                <a href="url">
                    <div>
                        <img src="obrazek" alt=""/>
                    </div>
                    <span>text</span>
                </a>
            </strong>
        </li>
    </ul>
</div>

    Jak osiągnać efekt żeby obrazek i tekst był w jednej linii?

    • #2

    DIV wyświetlić liniowo / liniowo-blokowo? Potem jakoś użyć właściwość vertical-align?

    https://codepen.io/web-forum-dobre/pen/JmjLap

    * {
  padding: 0;
  margin: 0;
}
#mobile #menu {
  list-style-type: none;
}

#mobile #menu li {
  margin: 5px;
}

#mobile #menu li div {
  display: inline;
}

#mobile #menu img {
  vertical-align: middle;
}

#menu div ul li span {
  vertical-align: middle;
}

#mobile #menu strong a {
  text-decoration: none;
}

    Można też by użyć pewnie Flexbox albo może nawet Gird jak wiesz, że będą to nowoczesne urządzenia mobilne a nie np. Android 2.3.5 i WebKit sprzed kilku lat.

    #3

    Dzięki a żeby po lewej stronie był obrazek a na środku text? text-align dla img nie działa.

    1 polubienie
    #4

    Jednym z rozwiązań jest display:inline-block dla obrazka i tekstu, potem ustawić identyczną wysokość obu elementów i dla obu line-height taki jak wysokość.

    1 polubienie
    #5

    Na łatwe wyśrodkowanie tekstu i zostawienie obrazka po lewej nie mam prostego pomysłu (musiałbym robić to przy pomocy pozycjonowania relatywnego elementów chyba).

    #6

    Tekst w diva, div ze zdjęciem i tekstem dać flex, do div z tekstem dodać text-align: center;.