alignment of the text inside the container
Question
Updated image link I have designed a container and it contains different sections so when i try to align the text and data inside it it goes down and not in the div. So I have tried but I don't know what is causing this kind of error...The company name and other details goes down or out of the div bar... How to do that so the company name which is inside h1 tag and the data below in p tag is displayed in same 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 answers
solution1
3 ACCPTED 2020-07-03 19:21:49
You need to change their display property to make in inline. In the below solution, I've used flex to make them inline. There are other ways also to make them inline.
You can read more about flexbox here: 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>
solution2
2 2020-07-03 19:23:30
Here you go. More cleaner version of your code.
I have added a div to bring your img and company together also use display:flex
Run snippet below.
#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>
solution3
0 2020-07-03 19:25:37
This is another way to using 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Image and Text Alignment Inside Container
Flexbox alignment with images and text inside same container
Inputs alignment inside container
Vertical alignment of text inside div
HTML image bottom alignment inside DIV container
Wraping text inside a container
CSS vertical alignment text inside li
vertically alignment of a text inside a button with an image
Vertical alignment of text and a div inside another one
Left margin alignment of a container inside a 6 column bootstrap div
Related Tags