我想在這個白色容器內添加“這是”文本作為標題，然后添加
標記為該人的簡短描述，
目前這個標簽在 div 里面但出現在外面，我不知道為什么，誰能幫忙......！
我使用的是簡單的 html/css 而不是任何框架等，這就是 css。
@charset "utf-8";
/* CSS Document */
.box {
height: 160px;
width: 450px;
background-color: white;
margin-left: 10px;
margin-top: 20px;
border-radius: 100px;
}
.box img {
height: 70px;
width: 70px;
margin-top: 21px;
margin-left: 31px;
margin-right: 349px;
margin-bottom: 69px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testing Person Card</title>
<link rel="stylesheet" href="css/style.css"> </head>
<section class="container" style="width: 1920px; height: 500px; background-color: gray; overflow: auto;">
<div class="box"> <img src="images/person1.png" alt="Person1">
<h1>this is</h1>
</div>
</section>
</html>uj5u.com熱心網友回復：
您可以將影像設定為背景影像。之后，您可以h1在框中垂直和水平居中您的元素。
這是一個例子：
.box {
height: 160px;
width: 450px;
background-color: white;
margin-left: 10px;
margin-top: 20px;
border-radius: 100px;
/*Background Image Properties*/
background-image: url('https://apk4all.com/wp-content/uploads/apps/Sagon-Circle-Icon-Pack-Dark-UI/EEbkBvCkmjhYr0xIfkCAEoN3cWVChd6Fh7tC5jfRS06MU0_8mMBwx9yTOHAnO_Hzp40-2.png');
background-size: 100px;
background-position: left;
background-repeat: no-repeat;
/*Center the text in the box*/
text-align: center;
}
h1{
transform: translateY(60px);
}<section class="container" style="width: 1920px; height: 500px; background-color: gray; overflow: auto;">
<div class="box">
<h1>this is</h1>
</div>
</section>uj5u.com熱心網友回復：
我已經 為演示運行代碼片段解決了您的問題
.box {
height: 200px;
width: 550px;
background-color: white;
margin-left: 10px;
margin-top: 20px;
border-radius: 100px;
}
.boximg {
float: left;
height: 70px;
width: 70px;
margin-left: 50px;
margin-top: 50px;
}
.box h1 {
margin-left: 200px;
}
.box p {
margin-left: 200px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<section
class="container"
style="width: 100%; height: 500px; background-color: gray; overflow: auto"
>
<div class="box">
<img class="boximg" src="https://i.ibb.co/nkcb8Rt/img.jpg" alt="Person1" />
<h1>This is Title</h1>
<p>
My Name is xyz. Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Incidunt enim numquam impedit cumque placeat quibusdam iusto cum
saepe sit unde nemo totam aliquid, sapiente animi alias obcaecati
</p>
</div>
</section>
</body>
</html>uj5u.com熱心網友回復：
沒有魔法發生。您的內容根本不適合您的div. 元素的邊距總和加上影像高度大于height. div默認DIV溢位是visible，因此內容看起來好像放在外面。
為確保內容永遠不會溢位其父元素，您可以更改overflow父元素的屬性。例如，您可以臨時設定overflow:auto在您的div. 這將自動顯示您的內容的滾動條。
您可以通過縮小margin-bottom影像或增加div.
uj5u.com熱心網友回復：
您可以通過相對位置的邊距進行調整。
element.style {
position: relative;
margin-top: -10%;
margin-left: 10%;
}
添加投擲百分比而不是 px 以使其有點回應:-)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421167.html
標籤：