Question

所以我正在制作一个“Meet The Team”页面，但文本不想放入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

一样

Answer 1

这是我的尝试...我使用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

Answer 2

您应该在父类上使用flex-box定位。

小提琴：https://jsfiddle.net/swordys/ngLg7tmL

div中的文字不适合

2 个答案: