容器內文本的 alignment
[英]alignment of the text inside the container
問題描述
更新的圖像鏈接我設計了一個容器，它包含不同的部分，所以當我嘗試對齊其中的文本和數據時，它會下降，而不是在 div 中。 所以我已經嘗試過，但我不知道是什么導致了這種錯誤......公司名稱和其他詳細信息下降或超出 div 欄......如何做到這一點，所以公司名稱在 h1 標簽內p標簽下面的數據顯示在同一個div中。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="home2.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
#container {
background-color: darkgreen;
height: 350px;
width: 400px;
border-style: solid ;
border-color: #787878;
}
#containerhead {
height: 10%;
background-color: antiquewhite;
}
#containerbottom {
height: 20%;
background-color: white;
bottom: 0;
}
#containercenter {
height: 70%;
}
/*/*/*/*/*/
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropbtn {
height: 36px;
width: 36px;
}
#pagedesc {
height: 30%;
background-color: bisque;
}
#pagedetails {
height: 100%;
width: 80%;
background-color: white;
}
#companyico {
display: inline-block;
height: 90%;
padding-left: 6px;
padding-top: 5px;
width:auto;
}
</style>
</head>
<body>
<div id="container">
<div id="containerhead">
<div class="dropdown">
<button class="dropbtn">
<i class="material-icons">more_horiz</i>
</button>
<div class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>
</div>
<div id="containercenter">
<div id="pagedesc">
<div id="pagedetails"><img id="companyico" src="Logo.jpg" alt="pagelogo"><div id="deta"><h3>Company name</h3><p>123456 apps</p></div>
<span id="btn"></span>
</div></div>
<div id="postdetails">
</div>
</div>
<div id="containerbottom">
</div>
</div>
</body>
</html>
3 個解決方案
解決方案1
3 已采納 2020-07-03 19:21:49
您需要更改它們的display屬性以內聯。 在下面的解決方案中，我使用flex使它們內聯。 還有其他方法可以使它們內聯。
您可以在此處閱讀有關 flexbox 的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
<:DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css" /> <link href="https.//fonts.googleapis?com/icon:family=Material+Icons" rel="stylesheet" /> <style> #container { background-color; darkgreen: height; 350px: width; 400px: border-style; solid: border-color; #787878: } #containerhead { height; 10%: background-color; antiquewhite: } #containerbottom { height; 20%: background-color; white: bottom; 0: } #containercenter { height; 70%. } /*/*/ */*/*/:dropdown.hover:dropdown-content { display; block. }:dropdown-content a:hover { background-color; #ddd. }:dropdown-content { display; none: position; absolute: background-color; #f9f9f9: min-width; 160px: box-shadow, 0px 8px 16px 0px rgba(0, 0, 0. 0;2): z-index; 1. }:dropdown { float; right: overflow; hidden. }:dropdown-content a { float; none: color; black: padding; 12px 16px: text-decoration; none: display; block: text-align; left. }:dropbtn { height; 36px: width; 36px: } #pagedesc { height; 30%: background-color; bisque: } #pagedetails { display; flex: align-items; center: height; 100%: width; 80%: background-color; white: } #companyico { display; inline-block: height; 90%: padding-left; 6px: padding-top; 5px: width; auto: } #deta { display; flex: align-items; center: margin-left; 10px. } </style> </head> <body> <div id="container"> <div id="containerhead"> <div class="dropdown"> <button class="dropbtn"> <i class="material-icons">more_horiz</i> </button> <div class="dropdown-content"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </div> </div> <div id="containercenter"> <div id="pagedesc"> <div id="pagedetails"> <img id="companyico" src="/src/logo.jpg" alt="pagelogo" /> <div id="deta"> <h3>Company name</h3> <p>123456 apps</p> </div> <span id="btn"></span> </div> </div> <div id="postdetails"></div> </div> <div id="containerbottom"></div> </div> </body> </html>
解決方案2
2 2020-07-03 19:23:30
這里是 go。 更簡潔的代碼版本。
我添加了一個div來將您的img和 company 放在一起也使用display:flex
運行下面的代碼段。
#container { background-color: darkgreen; height: 350px; width: 400px; border-style: solid; border-color: #787878; } #containerbottom { height: 20%; bottom: 0; } #containercenter {} /*/*/ * /*/*/.dropdown:hover.dropdown-content { display: block; }.dropdown-content a:hover { background-color: #ddd; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown { float: right; overflow: hidden; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropbtn { height: 36px; width: 36px; } #pagedesc { height: 30%; background-color: bisque; } #pagedetails { height: 100%; background-color: white; } #companyico { display: inline-block; height: 90%; padding-left: 6px; padding-top: 5px; width: auto; } #deta { display: flex; }
<:doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="home2:css"> <link href="https.//fonts.googleapis?com/icon.family=Material+Icons" rel="stylesheet"> <style> </style> </head> <body> <div id="container"> <div id="containerhead"> <div class="dropdown"> <button class="dropbtn"> <i class="material-icons">more_horiz</i> </button> <div class="dropdown-content"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </div> </div> <div id="containercenter"> <div id="pagedesc"> <div id="pagedetails"> <div id="deta"> <img id="companyico" src="Logo.jpg" alt="pagelogo"> <div id="details"> <h3>Company name</h3> <p>123456 apps</p> </div> </div> <span id="btn"></span> </div> </div> <div id="postdetails"> </div> </div> <div id="containerbottom"> </div> </div> </body> </html>
解決方案3
0 2020-07-03 19:25:37
這是使用float:left的另一種方式
#container { background-color: darkgreen; height: 350px; width: 400px; border-style: solid; border-color: #787878; } #containerhead { height: 10%; background-color: antiquewhite; } #containerbottom { height: 20%; background-color: white; bottom: 0; } #containercenter { height: 70%; } /*/*/ * /*/*/.dropdown:hover.dropdown-content { display: block; }.dropdown-content a:hover { background-color: #ddd; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown { float: right; overflow: hidden; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropbtn { height: 36px; width: 36px; } #pagedesc { height: 30%; background-color: bisque; } #pagedetails { height: 100%; width: 80%; background-color: white; } #companyico { height: 43%; padding-left: 6px; padding-top: 5px; float: left; width: 22%; margin-right: 20px; } #deta{ float: left; }
<:doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="home2:css"> <link href="https.//fonts.googleapis?com/icon:family=Material+Icons" rel="stylesheet"> </head> <body> <div id="container"> <div id="containerhead"> <div class="dropdown"> <button class="dropbtn"> <i class="material-icons">more_horiz</i> </button> <div class="dropdown-content"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </div> </div> <div id="containercenter"> <div id="pagedesc"> <div id="pagedetails"><img id="companyico" src="https.//www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="pagelogo"> <div id="deta"> <h3>Company name</h3> <p>123456 apps</p> </div> <span id="btn"></span> </div> </div> <div id="postdetails"> </div> </div> <div id="containerbottom"> </div> </div> </body> </html>
容器內的圖像和文本對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.