带边框的标题

Question

我想在BorderBoxdiv中有一个标题：

ATM它看起来像这样：

这是我的html代码：

<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>

这是我的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;
}

我想在图像上方的内部Logodiv中有一个标题。

我尝试了几种方法，但一直以来，标题都被处理为边界bnox元素，并被放置在图像左侧。

你知道解决这个问题的办法吗？

Answer 1

使用display:flex;、flex-direction: column;和三个带有img的div作为子级，并将它们放入带有display:flex;的一个div中。

<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>

Answer 2

您需要将徽标包装在另一个<div>中，并将display: flex;设置为该div；innerLogo2<div>似乎没有做任何事情，但我需要添加一个align-items: center;&CCD_ 8。

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>

Answer 3

允许#cert充当行，允许#wrapper4充当列并且允许内部div充当列。

结果如下：

@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 class="col"><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column -->
<div class="col"><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column -->
<div class="col"><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 class="col"><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column -->
<div class="col"><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column -->
<div class="col"><img src="https://via.placeholder.com/300x200.png/A548FF" alt="" id="certImg"></div><!-- Column  -->
</center>
</div>
</div><!-- cert Acting as row -->