Question

我正在尝试将配置文件图像与两个单独的div对齐。我使用了inline-block和text-align:center。我无法控制图像div的位置 - 它正在推动其他两个div向下并且不对齐。

我应该如何控制图像的位置？

＆＃13;

/* POST META */

.post-meta {
  background: #888;
  padding: 0 0%;
  border-top: 0px solid #ddd;
  border-bottom: 0px solid #ccc;
  text-align:center;
  float:none;
  margin-bottom:16px;
  height:80px;
}


.post-meta a {
  float:none;
  padding:0px;
  font-weight:normal;
}


.author-meta {
  font-size: 15px;
  letter-spacing: .5px;
  font-weight: normal;
  margin:0px;
  display: inline-block;
  padding: 0px;
  float: none;
  color:#333;
  background:#ddd;
  height:50px;
}


.author_location {
    padding: 0px;
    text-transform: none;
    font-size: 12px;
    color: #444;
    font-weight: normal;
    letter-spacing: .5px;
    display: inline-block;
    float: none;
    background:#ddd;
    height:50px;
    margin:0px;

}


.entry_author_image {
  float: none;
  padding: 0;
  display: inline-block;
  color: #999;
  font-size: 0.7em;
  font-weight: normal;
  background: no-repeat left center;
  background-size: 18px auto;
  margin:0px;
  letter-spacing: 1px;
  background:#ddd;
  height:50px;
}

＆＃13;

<div class="post-meta">
  <div class="entry_author_image">
<img src="https://www.dropbox.com/s/w1thsifonsi6dji/profile-image.png?raw=1" width="22" height="22"></div>
  <div class="author-meta"><a href="#">Author name</a></div>,
  <div class="author_location"><a href="#">City</a></div>
</div>

＆＃13;

Codepen here

Answer 1

只需将Layout = (RelativeLayout) findViewById(R.id.yourlayout); for(i=0;i<=[numberOfTextViews]-1;i++){ if(tvArray[i].getParent() == Layout){ tvArray[i].setTextColor(Color.RED); } }添加到author-meta和author-location类。如果您想在div顶部添加空格，可以添加vertical-align:top;或padding-top

codepen here

Answer 2

否则你可以这样做： http://codepen.io/pierre29177/pen/JdmejP

 <div id="author">
<img src="http://www.americansuburbx.com/wp-content/uploads/2010/03/08_059-PFOLIO_ONORATO-and-KREBS-PAG-52-53-Custom-Custom.jpg" alt="img6"/>

 <div id="meta">
 <a class="name">michael collins </a>
 <a class="book">into the grat wide open</a>
</div>
</div>


#author{
    position: fixed;

    height: 80px;
    background: #F99;
}
#author img {
    width: 40px;
    height: 40px;
    opacity: 0.7;
    margin-left:20px;
}

#author #meta a {
font-size: 10px;
text-transform: uppercase;
cursor:pointer;
margin:20px;
}

#author img, #author #meta  {   

margin-top:20px;
vertical-align:middle;
display:inline-block;
}

将3个div与图像对齐

2 个答案: