组织我的HTML和CSS代码（图片标签在中间的标签） 我是初学者在 HTML和 Css/Stand >，当我尝试用它（HTML和CSS）构建这个网页时，图像总是出现在选项卡的中间，我不知道如何组织它，
stackoverflow一直在说“看起来你的帖子大部分都是代码；请添加更多细节”我没什么要说的了，所以提前谢谢你：） 这是我的html代码：组织我的HTML和CSS代码（图片标签在中间的标签） 我是初学者在 HTML和 Css/Stand >，当我尝试用它（HTML和CSS）构建这个网页时，图像总是出现在选项卡的中间，我不知道如何组织它，,html,css,Html,Css,stackoverflow一直在说“看起来你的帖子大部分都是代码；请添加更多细节”我没什么要说的了，所以提前谢谢你：） 这是我的html代码： <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href=
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>HOME</title>
</head>
<body>
<div class="mytabs">
<input type="radio" id="tabfree" name="mytabs" checked="checked">
<label for="tabfree">Free</label>
<div class="tab">
<h2>Free</h2>
<p>Mathematics (from Greek: μάθημα, máthēma, 'knowledge, study, learning') includes the study of such topics as quantity (number theory),[1] structure (algebra),[2] space (geometry),[1] and change (mathematical analysis).[3][4][5] It has no generally accepted definition.[6][7]
Mathematicians seek and use patterns[8][9] to formulate new conjectures; they resolve the truth or falsity of such b
h
.</p>
</div>
<input type="radio" id="tabsilver" name="mytabs">
<label for="tabsilver">Ser</label>
<div class="tab">
<h2>Sr</h2>
<p>jctivity from as far back as written records exist. The research required to solve mathematical problems can take years or even centuries of sustained inquiry.
Rigorous arguments first appeared in Greek mathematics, most notably in Euclid's Elements.[10] Since the pioneering work of Giuseppe Peano (1858–1932), David Hilbert (1862–1943), and others on axiomatic systems in the late 19th century, it has beco.</p>
</div>
<input type="radio" id="tabgold" name="mytabs">
<label for="tabgold">Gd</label>
<div class="tab">
<h2>Gd</h2>
<p>slow pace until the Renaissance, when mathematical innovations interacting with new scientific discoveries led to a rapid increase in the rate of mathematical discovery that has continued to the present day.[11]l
</p>
</div>
<!--
IMAGES
-->
<div class='all-image'>
<div class='single-pic'>
<img src='images/brid2.jpg' >
<div class="image-text">
<h1>bride</h1>
<p>hapyy bride happy life</p>
<p>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
</p>
</div>
</div>
</div>
<div class='all-image'>
<div class='single-pic'>
<img src='images/brid1.jpg' >
<div class="image-text">]
<h1>bride</h1>
<p>hapyy bride happy life2</p>
<p>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
</p>
</div>
</div>
</div>
<div class='all-image'>
<div class='single-pic'>
<img src='images/image.jpg' >
<div class="image-text">]
<h1>bride</h1>
<p>hapyy bride</p>
<p>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
</p>
</div>
</div>
</div>
</body>
</html>
.mytabs.tab{
宽度：100%；
填充：20px；
背景：rgb（114,35,35）；
顺序：1；
显示：无；
.mytabs.tabh2{
字号：2em；
}文本对齐divimg为了避免图像居中，我假设您只希望文本居中对齐，请尝试在类图像文本下设置CSS属性
text align:center
/*tab*/
.mytabs {
display: flex;
flex-wrap: wrap;
max-width: 600px;
margin: 50px auto;
padding: 25px;
}
.mytabs input[type="radio"] {
display: none;
}
.mytabs label {
padding: 25px;
background: white;
font-weight: lighter;
}
.mytabs .tab {
width: 100%;
padding: 20px;
background: #fff;
order: 1;
display: none;
.mytabs .tab h2 {
font-size: 2em;
}
.mytabs input[type='radio']:checked + label + .tab {
display: block;
}
.mytabs input[type="radio"]:checked + label {
background: #18ffff;
border-radius: 18px;
}
.all-image{
text-align: center;
}
.all-image .single-pic{
display: flex;
padding: 24px;
position: relative;
width: 30%;
height: 30%;
}