Question

我尝试并排放置两个div（.health-icon和.health-description），但将它们水平居中于.health-status。我能够做到这一点。

但是，它们没有正确垂直对齐。我需要.health-description line-height与.ranking的大小相同。但似乎.health-description略低于.health-icon。

＆＃13;

.health-status {
  text-align: center;
  margin: 0 auto;
}
.health-icon {
  display: inline-block;
}
.health-description {
  display: inline-block;
  line-height: 70px;
  font-weight: bold;
}
.rating-circle {
  height: 70px;
  width: 70px;
  border-radius: 250px;
  font-size: 36px;
  font-weight: 700;
  color: white;
  line-height: 65px;
  text-align: center;
  background: #2c3e50;
  /*float: left;*/
  display: inline-block;
  /*margin-right: 20px;*/
  padding-left: 2px;
  padding-top: 2px;
}

＆＃13;

<div class="panel-body">
  <div class="health-status">
    <div class="health-icon">
      <div id="rating" class="rating-circle sq-orange" data-role="status-name">A</div>
    </div>
    <div class="health-description">UTI</div>
  </div>
  <div class="minidash">
    <section class="row">
      <div class="card col-md-6">
        <div class="value">123.456</div>
        <div class="name">Porte</div>
      </div>
      <div class="card col-md-6">
        <div class="value">-435,0</div>
        <div class="name">Variação de Curto Prazo</div>
      </div>
    </section>
  </div>
</div>

＆＃13;

http://jsfiddle.net/n1o8uvcv/1/

修改

这与How to horizontally center a <div> in another <div>?不同，其中焦点是将div水平居中于另一个内。这已经在这里解决了。当我使用inline-block显示时，两个div没有正确垂直对齐。

Answer 1

这是一个非常具体的问题，所以我会给出一个不适用于一般情况的答案。

将您的健康描述类更改为：

public class FilesAdapter extends RecyclerView.Adapter<FilesAdapter.ViewHolder> {
    public final String TAG = "FILES_ADAPTER";
    private FTPFile[] dataset;

    //some methods and stuff...

    public static class ViewHolder extends RecyclerView.ViewHolder {
        public final String TAG = "FILES_VH";
        private final TextView nameTextView;
        private final TextView infoTextView;
        private final ImageView imageView;

        public ViewHolder(View v) {
            super(v);
            // Define click listener for the ViewHolder's View.
            v.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Log.d(TAG, "Element " + getPosition() + " clicked.");
                    //here i want to open the dialog fragment and start downloading/openning

                }
            });
            nameTextView = (TextView) v.findViewById(R.id.fileNameTextView);
            infoTextView = (TextView) v.findViewById(R.id.fileInfoTextView);
            imageView = (ImageView) v.findViewById(R.id.fileImageView);
        }

        public TextView getNameTextView() {
            return nameTextView;
        }

        public ImageView getImageView() {
            return imageView;
        }

        public TextView getInfoTextView() {
            return infoTextView;
        }
    }

}

将两个div并排对齐并将它们置于另一个内部

1 个答案: