I want to have a heading inside a BorderBox div:
This is my html code:
<div id="cert">
<div id="wrapper4">
<div id="innerLogo">
<div><img src="./img/ccna.png" id="certImg"/></div>
<div><img src="./img/linux.png" id="certImg"/></div>
<div><img src="./img/azure.png" id="certImg"/></div>
</div>
<div id="innerLogo2">
<div><img src="./img/javascript-1.png" id="certImg"/></div>
<div><img src="./img/python.png" id="certImg"/></div>
<div><img src="./img/powershell.png" id="certImg"/></div>
</div>
</div>
</div>
And this is my CSS:
#cert {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 1000px;
box-sizing: border-box;
display: flex;
justify-content: left;
}
#wrapper4 {
width: auto;
display: flex;
justify-content: space-evenly;
}
#innerLogo{
width: 490px;
padding: 20px;
margin-right: 20px;
box-sizing: border-box;
display: flex;
justify-content: left;
justify-content: space-between;
background-color: #dfdfdf;
border-radius: 20px;
}
#innerLogo2{
width: 490px;
padding: 25px;
box-sizing: border-box;
display: flex;
justify-content: left;
justify-content: space-between;
background-color: #dfdfdf;
border-radius: 20px;
}
#certImg{
width: 140px;
height: 140px;
}
I want to have a Heading inside inner Logo div above the images.
I tried several things but all the time the heading is handles as a border bnox element and is placed left to the images.
Do you know any solution to this?
CodePudding user response：
Use display:flex;, flex-direction: column; and three divs with img as child put into one div with display:flex;.
<div id="innerLogo" style="display: flex; flex-direction: column;">
<h1>Heading</h1>
<div style="display: flex;">
<div><img src="./img/ccna.png" id="certImg" /></div>
<div><img src="./img/linux.png" id="certImg" /></div>
<div><img src="./img/azure.png" id="certImg" /></div>
</div>
</div>
#cert {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 1000px;
box-sizing: border-box;
display: flex;
justify-content: left;
}
#wrapper4 {
width: auto;
display: flex;
justify-content: space-evenly;
}
#innerLogo {
width: 490px;
padding: 20px;
margin-right: 20px;
box-sizing: border-box;
display: flex;
justify-content: left;
justify-content: space-between;
background-color: #dfdfdf;
border-radius: 20px;
}
#innerLogo2 {
width: 490px;
padding: 25px;
box-sizing: border-box;
display: flex;
justify-content: left;
justify-content: space-between;
background-color: #dfdfdf;
border-radius: 20px;
}
#certImg {
width: 140px;
height: 140px;
}<div id="cert">
<div id="wrapper4">
<div id="innerLogo" style="display: flex; flex-direction: column;">
<h1>Heading</h1>
<div style="display: flex;">
<div><img src="./img/ccna.png" id="certImg" /></div>
<div><img src="./img/linux.png" id="certImg" /></div>
<div><img src="./img/azure.png" id="certImg" /></div>
</div>
</div>
<div id="innerLogo2" style="display: flex; flex-direction: column;">
<h1>Heading</h1>
<div style="display: flex;">
<div><img src="./img/javascript-1.png" id="certImg"/></div>
<div><img src="./img/python.png" id="certImg"/></div>
<div><img src="./img/powershell.png" id="certImg"/></div>
</div>
</div>
</div>
</div>CodePudding user response：
You need to wrap your logos in another <div> and set display: flex; to that div. The justify-content styling you had in your innerLogo & innerLogo2 <div> did not appear to be doing anything, but I needed to add both an align-items: center; & flex-direction: column to them.
CSS
#cert {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 1000px;
box-sizing: border-box;
display: flex;
justify-content: left;
}
#wrapper4 {
width: auto;
display: flex;
justify-content: space-evenly;
}
#innerLogo{
width: 490px;
padding: 20px;
margin-right: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
background-color: #dfdfdf;
border-radius: 20px;
}
#innerLogo2{
width: 490px;
padding: 25px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
background-color: #dfdfdf;
border-radius: 20px;
}
#certImg{
width: 140px;
height: 140px;
}
.logoContainer {
display: flex;
}
HTML:
<div id="cert">
<div id="wrapper4">
<div id="innerLogo">
<h1>Header you wanted</h1>
<div class = "logoContainer">
<div><img src="./img/ccna.png" id="certImg"/></div>
<div><img src="./img/linux.png" id="certImg"/></div>
<div><img src="./img/azure.png" id="certImg"/></div>
</div>
</div>
<div id="innerLogo2">
<h1>Header you wanted</h1>
<div class = "logoContainer">
<div><img src="./img/javascript-1.png" id="certImg"/></div>
<div><img src="./img/python.png" id="certImg"/></div>
<div><img src="./img/powershell.png" id="certImg"/></div>
</div>
</div>
</div>
</div>
CodePudding user response：
Allow #cert to act as a row and #wrapper4 as a column, with the inner divs as columns.
Here's the result:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
font-family: 'Poppins', sans-serif;
}
body{
background-color: #E4DDC0 ;
}
#cert{
width: 100%;
}
h1{
text-align:center;
margin: auto;
}
#wrapper4{
padding: 5px;
width: 45%;
display: inline-block;
background-color: #fff;
overflow: hidden;
border-radius: 10px;
margin: auto;
}
.col{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 30%;
background-color:rgb(255, 255, 255);
border-radius: 10px;
overflow: hidden;
}
#certImg{
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
}<div id="cert"><!-- Acting as a row -->
<div id="wrapper4"><!-- Main Column 1 -->
<h1>Heading Here</h1>
<center>
<div ><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column -->
<div ><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column -->
<div ><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column -->
</center>
</div>
<div id="wrapper4"><!-- Main Column 2 -->
<h1>Heading Here</h1>
<center>
<div ><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column -->
<div ><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column -->
<div ><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column -->
</center>
</div>
</div><!-- cert Acting as row -->