CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
drai29
drai29

Reputation: 161

Having an issue with alignment of image/text

Trying to align the image vertically, and the text centered according to image. The whole card is about 300px * 200px. I want the image to be on the left hand side with text on the right.

<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%;
}

Upvotes: 0

Views: 23

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You can add a class to the row and use flexbox positioning. align-items: center on the row that holds the 2 columns, then also use flex on the .content element and create a flex column with 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>

Upvotes: 1

Related Questions