Html 如何移动图像下的绿色文本？

如何从图像图标下附着的图像中移动绿色文本

我需要把它移到图像下面。我正在使用ReactJS和HTML。当治疗师为他们的账户付款时，文本出现

---

如果我对你的问题理解正确，那很简单。。。只需将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>

---

尝试将标志行移到左列：

// 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。但是总体思路是这样的。

将验证过的提供者文本代码直接移动到img代码下面就可以了。

---

可能只需要调整img的底边距以获得间距。

如果与样式有关，则仅共享html渲染和css。你的一段代码没有显示你的问题。你能为.tc图像容器和.tc信息容器共享你的css代码吗？@ClaireLin我刚刚添加了它我试着这样做…但不是那么简单..这样文本就出现在图像旁边，而不是在它们之间的itadd下，或者将它们的显示css更改为display:block；我将把flags行容器移动到tc image容器中，因为tc列表项可以使用它flex@StanciuPatrick只需将tc图像容器包装起来，并将行div标记在它们自己的容器中，这样它们就被包含为独立的块元素，并将一个显示在另一个下，而不是单独受到布局样式的影响显示器：flex；弯曲方向：行；在tc列表项类中。

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

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