我在一个 Bootstrap 站点上工作，现在我在一个部分，我试图在左边制作文本，在右边制作图像。我把这一切都记下来了，但是我很难将图像垂直居中。我弄乱了填充和边距，但结果总是很奇怪。
这是我正在做的事情的图片:
这是我的这部分代码:
HTML
<!-- Section 1 -->
<div class="cssSection cssCenter">
<div class="container">
<div class="row">
<div class="col-sm-7">
<p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p>
</div>
<div class="col-sm-5">
<img class="img-center img-responsive" src="http://placehold.it/300x300">
</div>
</div>
</div>
</div>
CSS
.cssCenter {
text-align: center;
}
.cssSection {
padding: 120px 0 70px;
}
.cssInformation {
font-size: 18px;
}
.img-center {
margin: auto;
}
任何人都可以帮助我了解如何以正确的方式将图像与左侧的文本对齐吗？将不胜感激。
最佳答案
试试这个，请让我知道您的反馈!
使用了这样的 flexbox:
.cssSection .row {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: row;
}
对于响应式需求，我有这个:
@media only screen and (max-width: 650px) {
.cssSection .row {
flex-direction: column;
}
}
.cssCenter {
text-align: center;
}
.cssSection {
padding: 120px 0 70px;
}
.cssSection .row {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: row;
}
.cssInformation {
font-size: 18px;
}
.img-center {
margin: auto;
}
@media only screen and (max-width: 650px) {
.cssSection .row {
flex-direction: column;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<!-- Section 1 -->
<div class="cssSection cssCenter">
<div class="container">
<div class="row">
<div class="col-sm-7">
<p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p>
</div>
<div class="col-sm-5">
<img class="img-center img-responsive" src="http://placehold.it/300x300">
</div>
</div>
</div>
</div>
</body>关于html - 如何使用 bootstrap 使图像和文本垂直居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38840730/