За последние 24 часа нас посетили 8884 программиста и 611 роботов. Сейчас ищут 114 программистов ...

Выравнивание вложенного элемента

Тема в разделе "HTML и CSS", создана пользователем MiraKR, 11 окт 2019.

  1. MiraKR

    MiraKR Новичок

    С нами с:
    9 июл 2018
    Сообщения:
    32
    Симпатии:
    2
    Здравствуйте! Подскажите, пожалуйста, как центрировать вложенный элемент - картинку с рамкой, (расположенную слева от текста), так, чтобы она оставалась на всех устройствах (мониторах компьютеров и мобильных) слева от текста, но посредине по вертикали и горизонтали - с равными отступами сверху, слева, снизу от рамки и справа от текста. Код https://jsfiddle.net/14qz2h0u/

    Уже погуглила, испробовала массу приемов, не получается выровнять.
     
  2. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    Код (Text):
    1. <style>
    2. .a {
    3.   background-color: rgb(255, 255, 255, 0.08);
    4.   border-radius: 10px;
    5.   margin: 20px 0 20px 0;
    6.   padding: 20px 20px 20px 0;
    7.   border: 4px solid #000;
    8.   display: flex;
    9.   align-items: center;
    10.   justify-content: center;
    11. }
    12.  
    13. .c {
    14.   width: 200px;
    15.   height: 200px;
    16.   overflow: hidden;
    17.   border: 1px solid #000;
    18.   border-radius: 50%;
    19.   margin-right:20px;
    20.   margin-left:20px;
    21. }
    22.  
    23. </style>
    24. <div class="a">
    25.   <div class="b">
    26.     <img class="c" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" alt="d" />
    27.   </div>
    28.   <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>
    29. </div>
     
    MiraKR нравится это.
  3. MiraKR

    MiraKR Новичок

    С нами с:
    9 июл 2018
    Сообщения:
    32
    Симпатии:
    2
    Спасибо Вам за помощь! У меня почему-то получается картинка сжатой, а текст наползает. В приложении скриншот. Не подскажете, что исправить?
     

    Вложения:

    • plaschka.jpg
      plaschka.jpg
      Размер файла:
      37,6 КБ
      Просмотров:
      2
  4. MiraKR

    MiraKR Новичок

    С нами с:
    9 июл 2018
    Сообщения:
    32
    Симпатии:
    2
    Додумалась, как исправить - добавила картинке min-width.

    Еще раз спасибо Вам kazadai90 за помощь! Вы крутой специалист.
     
    artoodetoo и kazadai90 нравится это.
  5. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    спасибо