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定位。在包含2列的行上align-items: center，然后在.content元素上使用flex，并使用column

创建flex justify-content: center

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

遇到图像/文本对齐问题

1 个答案: