Так что я создаю страницу "Знакомство с командой", но текст не хочет помещаться внутри div. Я знаю, что я делаю что-то не так, поэтому любая помощь будет оценена Это код
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"><!-- Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <title>Login</title> </head> <body> <header><a href="homepage.html"><p id="college">Homepage</p></a></header> <div><img class="top-logo" src="images/logo.png"></div> <div class="laura1"><img class="laura" src="images/laura.jpg"><p>Laura - L2 Coordinator graphic designer and dance enthusiast. </p></div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
и это CSS
.laura1 { width: 75%; height: 150px; background-color: white; margin-left: 50px; margin-top: 30px; } .laura { width: 150px; height: 150px; margin: auto; } #text1 { font-size: 12.5px; padding-left: 140px; color: black; }
О, и вот как получается с кодом https://gyazo.com/b152d83601a127eeb3d758e85f26fca6
Вы должны использовать flex-box позиционирование в родительском классе.
flex-box
Скрипка: https://jsfiddle.net/swordys/ngLg7tmL
Вот моя попытка ... Я использовал flexbox для выравнивания текста. Вы можете изменить цвет фона, чтобы получить желаемый результат.
.laura1 { width: 25%; padding: 15px; background-color: white; border: 1px solid #ccc; display: flex; flex-direction: column; } .laura { width: 150px; height: 150px; } #text1 { width: 50%; text-align: center; color: black; margin-left: auto; margin-bottom: 0; }
https://codepen.io/anon/pen/qYPmBW