За последние 24 часа нас посетили 5742 программиста и 459 роботов. Сейчас ищут 232 программиста ...

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

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

  1. MiraKR

    MiraKR Новичок

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

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

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

    С нами с:
    6 фев 2013
    Сообщения:
    100
    Симпатии:
    19
    Код (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
    Сообщения:
    100
    Симпатии:
    19
    спасибо