我正在尝试将徽标与其下方的相应文本水平对齐，以便它们看起来很好并且有序。目前，它们只是垂直的。我搜索过这个网站和其他许多网站，并尝试了不同的解决方案，但似乎没有任何效果。这是我的代码。
.intro-text {
color: #000000;
display: block;
width: 100%;
margin: 50px 0 0 0;
text-align: justify;
line-height: 1.8em;
}
.intro-text-3d {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-process {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-toolset {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
/** Logos **/
.logos-all {
display: block;
text-align: center;
margin: 0 auto;
}
img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
border: 0;
line-height: 50px;
max-width: 100%;
width: 5%;
height: auto;
margin-bottom: .95em;
}
strong {
display: block;
font-weight: 700;
text-align: center;
}
section h4 {
text-align: center;
}<article>
<section>
<p class="intro-text">
Some text goes here.
</p></div>
<div>
<img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/>
<strong>CSS3</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/>
<strong>Javascript</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/>
<strong>Wordpress</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/>
<strong>PhP</strong>
</div>
</div>
</section>
<section>
<p class="intro-text-3d">
Some text goes here
</p>
<div class="logos-all">
<div>
<img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/>
<strong>3DS MAX</strong>
</div>
<div>
<img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/>
<strong>Cinema 4D</strong>
</div>
<div>
<img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/>
<strong>Blender</strong>
</div>
</div>
</section>
<section>
<h4>How the process works</h4>
<p class="intro-text-process">Some text goes here </p>
</section>
<section>
<h4>Design Toolset</h4>
<p class="intro-text-toolset">Some text goes here.</p>
<div class="logos-all">
<div>
<img src="img/photoshop-logo.png" alt="Photoshop" height="80" width="79"/>
<strong>Photoshop</strong>
</div>
<div>
<img src="img/illustrator-logo.png" alt="Illustrator" height="80" width="79"/>
<strong>Illustrator</strong>
</div>
<div>
<img src="img/gimp-logo.png" alt="Gimp" height="80" width="79"/>
<strong>Gimp</strong>
</div>
<div>
<img src="img/inkscape-logo.png" alt="Inkscape"/>
<strong>Inkscape</strong>
</div>
</div>
</article>
</section>
答案 0 :(得分：0)
如果您想使用Bootstrap，可以使用bootstrap面板。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 1</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 2</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 3</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
由于您的图片是内嵌块，因此您需要将text-align: center放在父级（<div>）上。
<强>可替换地：
您还可以制作图片display: block
或使用flexbox：
制作<div> display: flex; flex-direction: column和您的图片width: auto;
答案 2 :(得分：0)
您可以使用浮动来水平对齐块与图像和文本，并使用文本对齐来对齐图像和文本。
隐藏在内部的溢出部分会清除其中的浮动内容，以防您想要背景并且无法正常显示。
.intro-text {
color: #000000;
display: block;
width: 100%;
margin: 50px 0 0 0;
text-align: justify;
line-height: 1.8em;
}
.intro-text-3d {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-process {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-toolset {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
/** Logos **/
.logos-all {
display: block;
text-align: center;
margin: 0 auto;
}
img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
border: 0;
line-height: 50px;
max-width: 100%;
width: 5%;
height: auto;
margin-bottom: .95em;
}
strong {
display: block;
font-weight: 700;
text-align: center;
}
section h4 {
text-align: center;
}
section {
overflow: hidden;
}
section > div {
text-align: center;
float: left;
width: 25%; /* 1/logos in row */
}<article>
<section>
<p class="intro-text">
Some text goes here.
</p></div>
<div>
<img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/>
<strong>CSS3</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/>
<strong>Javascript</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/>
<strong>Wordpress</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/>
<strong>PhP</strong>
</div>
</div>
</section>
<section>
<p class="intro-text-3d">
Some text goes here
</p>
<div class="logos-all">
<div>
<img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/>
<strong>3DS MAX</strong>
</div>
<div>
<img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/>
<strong>Cinema 4D</strong>
</div>
<div>
<img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/>
<strong>Blender</strong>
</div>
</div>
</section>
<section>
<h4>How the process works</h4>
<p class="intro-text-process">Some text goes here </p>
</section>