Здравствуйте! Подскажите, пожалуйста, как центрировать вложенный элемент - картинку с рамкой, (расположенную слева от текста), так, чтобы она оставалась на всех устройствах (мониторах компьютеров и мобильных) слева от текста, но посредине по вертикали и горизонтали - с равными отступами сверху, слева, снизу от рамки и справа от текста. Код https://jsfiddle.net/14qz2h0u/ Уже погуглила, испробовала массу приемов, не получается выровнять.
Код (Text): <style> .a { background-color: rgb(255, 255, 255, 0.08); border-radius: 10px; margin: 20px 0 20px 0; padding: 20px 20px 20px 0; border: 4px solid #000; display: flex; align-items: center; justify-content: center; } .c { width: 200px; height: 200px; overflow: hidden; border: 1px solid #000; border-radius: 50%; margin-right:20px; margin-left:20px; } </style> <div class="a"> <div class="b"> <img class="c" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" alt="d" /> </div> <div class="text">Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</div> </div>
Спасибо Вам за помощь! У меня почему-то получается картинка сжатой, а текст наползает. В приложении скриншот. Не подскажете, что исправить?
Додумалась, как исправить - добавила картинке min-width. Еще раз спасибо Вам kazadai90 за помощь! Вы крутой специалист.