html - 图像/文本对齐有问题

Question

尝试垂直对齐图像，并根据图像居中放置文本。整张卡片大约是300px * 200px。我希望图像位于左侧，文本位于右侧。

<div class="card center-block">
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="photo">
                <img class="rounded" src="../im/3.jpg" width="130" height="130" style="min-height:50px;" />
                }
            </div>
        </div>
        <div class="col-sm-6" style="height: 250px; align-items:center">
            <div class="content">
                <h5 class="left-align"><strong>John Doe</strong></h5>
                <p class="left-align">Software Developer</p>
            </div>
        </div>
    </div>
</div>

CSS:

.card {
min-width: 350px;
max-width: 350px;
min-height: 200px;
max-height: 200px;
}

.photo {
padding-top: 35px;
margin-right: 10px;
display:inline-block;
height: 100%;
float: left;
}

.content{
height: 100%;
}

Answer 1

你可以在行中添加一个类并使用 flexbox 定位。 align-items: center 在包含 2 列的行上，然后也在 .content 元素上使用 flex 并创建一个 flex column 对齐内容:居中

.card {
min-width: 350px;
max-width: 350px;
min-height: 200px;
max-height: 200px;
}

.photo {
margin-right: 10px;
display:inline-block;
height: 100%;
float: left;
}

.special-row {
  display: flex;
  align-items: center;
}
.special-row .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card center-block">
<div class="container"><div class="row special-row">
  <div class="col-sm-6">
    <div class="photo">
      <img class="rounded" src="http://androidandme.com/wp-content/uploads/2015/12/Google-Now-on-Tap.jpg"width="130" height="130" style="min-height:50px;" />
                
            </div>
        </div>
        <div class="col-sm-6 details" style="height: 250px; align-items:center">
            <div class="content">
                <h5 class="left-align"><strong>John Doe</strong></h5>
                <p class="left-align">Software Developer</p>
            </div>
        </div>
    </div>
</div>