Как я могу переместить зеленый текст под изображением?

Question

Как я могу переместить зеленый текст с изображения, прикрепленного под значком изображения?

Мне нужно переместить его прямо под изображением. Я использую ReactJS и HTML. Текст появляется, когда терапевт заплатил за свой счет.

<Link to={`/therapist/profile/${this.therapist.id}`} target="_blank" onClick={this.props.handleViewProfileGuest.bind(this, this.props.therapist.id)}>
    <li key={this.props.index} className="tc-list-item">
        {/* Avatar Container */}
        <div className="tc-image-container">
            <img src={this.getAvatarUrl(this.therapist)} alt='therapist-avatar' />
        </div>
        {/* User Profile Container */}
        <div className="tc-info-container">
            {/* Name & Title */}
            <div className="tc-main-info">
                <span className="tc-u-name">{`${this.therapist.firstName} ${this.therapist.lastName}, `}</span>
                <span className="tc-u-title">&nbsp;{ ` ${this.therapist.title || 'Therapist'}` }</span>
            </div>
            <div className="flags-row">
                {this.renderVerifiedFlag()}
                {this.renderInsuranceFlag()}
            </div>
            {/* Details */}
            <div className="tc-details-info">
                {/* Email */}
                <div className="tr-reviews-row">
                    <Rating placeholderRating={this.therapist.avgScore || 0}
                        emptySymbol={<img src={ratingStarEmpty} className="icon" alt="ratingEmpty"/> }
                        placeholderSymbol={<img src={ratingStarFull} className="icon" alt="ratingFull" />} 
                        readonly/>
                    <span className="tr-reviews-value">{ `(${this.therapist.reviewCnt} reviews)` }</span>
                </div>
                {/* Phone */}
                {this.renderContactInfo()}

            </div>
        </div>
        <ReactTooltip type="info" place="right"/>
    </li>
</Link>

, а вот css part

& .tc-image-container {
        width: 130px;
        height: 130px;
        border-radius: 15px;
        overflow: hidden;
    }

    & .tc-image-container img {
        width: 100%;
        height: 100%;
    }

    & .tc-info-container {
        //margin-left: 140px;
        flex: 1;
        padding-left: 50px;
    }

Answer 1

Если я правильно понимаю ваш вопрос, это очень просто ... просто переместите div в правильное место в вашем html.

<Link to={`/therapist/profile/${this.therapist.id}`} target="_blank" onClick={this.props.handleViewProfileGuest.bind(this, this.props.therapist.id)}>
<li key={this.props.index} className="tc-list-item">
    {/* Avatar Container */}
    <div className="tc-image-container">
        <img src={this.getAvatarUrl(this.therapist)} alt='therapist-avatar' />
    </div>

    <!-- Moved it to here -- >
    <div className="flags-row">
        {this.renderVerifiedFlag()}
        {this.renderInsuranceFlag()}
    </div>

    {/* User Profile Container */}
    <div className="tc-info-container">
        {/* Name & Title */}
        <div className="tc-main-info">
            <span className="tc-u-name">{`${this.therapist.firstName} ${this.therapist.lastName}, `}</span>
            <span className="tc-u-title">&nbsp;{ ` ${this.therapist.title || 'Therapist'}` }</span>
        </div>

        <!-- text was here -->

        {/* Details */}
        <div className="tc-details-info">
            {/* Email */}
            <div className="tr-reviews-row">
                <Rating placeholderRating={this.therapist.avgScore || 0}
                    emptySymbol={<img src={ratingStarEmpty} className="icon" alt="ratingEmpty"/> }
                    placeholderSymbol={<img src={ratingStarFull} className="icon" alt="ratingFull" />} 
                    readonly/>
                <span className="tr-reviews-value">{ `(${this.therapist.reviewCnt} reviews)` }</span>
            </div>
            {/* Phone */}
            {this.renderContactInfo()}

        </div>
    </div>
    <ReactTooltip type="info" place="right"/>
</li>

Answer 2

Перемещение проверенного текстового кода провайдера непосредственно под img-кодом поможет. Возможно, просто нужно настроить нижнее поле для img для интервала.

Answer 3

Попробуйте переместить строку флага в левый столбец:

// Add a new div with the class name "left-col"
<div className="left-col">
    <div className="tc-image-container">
      <img src={this.getAvatarUrl(this.therapist)} alt="therapist-avatar" />
    </div>
    // Move the flags-row div from its original place to here
    <div className="flags-row">
      {this.renderVerifiedFlag()}
      {this.renderInsuranceFlag()}
    </div>
</div>
<div className="tc-info-container">
    ...the rest of your DOM remains unchanged
</div>

// Give .left-col div the same width as the current image-container.
& .left-col {
  width: 130px;
}

Возможно, вам придется немного поиграть с CSS. Но общая идея здесь.