Question

我创建了一个上传封面照片的用户个人资料系统，但我不喜欢用户在他/她的个人资料照片底部看到用户名的方式;

在上图中，您可以看到用户名（Aaron *）的显示位置，红色箭头表示我想要的位置。我尝试在包含图像的div中插入用户名，但它总是在底部，有时甚至不再看到它。

这是我的个人资料照片和封面照片的css代码;

.profile_photo {
    width: 70px;
    height: 70px;
    border: 1px solid #aaa;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    overflow:hidden;
    margin-left: 10px;
}

.profile_photo img{
    width: 100%;
    height: 100%;
}

.cover_photo {
    height: 110px;
}

，这是用户个人资料的代码

<div class="cover_photo" style="<?php echo $cover_photo; ?>">
            <div class="dropdown">
                <a href="" class="dropdown-toggle pull-right m-opt-prof" type="button" id="menu1" data-toggle="dropdown">
                    <span class="icon icon-option"></span>
                </a>
                <br>
                <br>
                <ul class="dropdown-menu pull-right m-prof-link-opt" role="menu" aria-labelledby="menu1">
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">
                            Dropdown1
                        </a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">
                            Dropdown2
                        </a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">
                            Dropdown3
                        </a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="edit_profile">
                            Edit profile
                        </a>
                    </li>
                </ul>
            </div>
            <div class="profile_photo">
                <?php echo $profile_photo; ?>
            </div>
        </div>
<div id="spro_d_d">
      <div id="spro_d">
              <b>
                <?php echo $username; ?>    
              </b> 
              <?php echo $status_online; ?><br>
        <p>
          <font color="#656565">
            <?php echo $full_name; ?>
          </font><br>
          <?php echo nl2br($bio); ?>
        </p>
        <?php echo '<span class="icon icon-website spro_m_d" title="website"></span>&nbsp;'.$set_site; ?>&nbsp;&nbsp;&nbsp;&nbsp;<?php echo '<span class="icon icon-location spro_m_d" title="location"></span>&nbsp;'.$location; ?>
          </div>
    </div>
    <hr class="hr_line">
    <div id="u_pff_st_b">
        <div class="row">
          <div id="u_pff_st" class="col-xs-4 col-sm-4">
            <a href="#post">
              0<br>
              Posts
            </a>
          </div>
          <div id="u_pff_st" class="col-xs-4 col-sm-4">
            <a href="#followers">
              0<br>
              Followers
            </a>
          </div>
          <div id="u_pff_st" class="col-xs-4 col-sm-4">
            <a href="#following">
              0<br>
              Following
            </a>
          </div>
        </div> <!-- row -->
    </div>

<?php echo $cover_photo; ?>持有此内容;

background: url(../users/uploads/profile/default.jpg) no-repeat 50% 50%;

并且<?php echo $profile_photo; ?>拥有此内容;

<img src='../users/uploads/profile/$current_photo' alt='$username' title='$username'>

Answer 1

您可以在profile_photo内添加用户名。

I tried inserting the username inside the div containing the image but it always goes at the bottom and sometimes i don't even see it anymore.。这是因为overflow:hidden上的profile_photo样式。所以，从样式中删除overflow:hidden，并将样式添加到img而不是profile_photo div。（边界半径，宽度，高度等）

然后，要将文本置于profile_photo div内，您可以使用display:flex;align-items:center

见下文

＆＃13;

.profile_photo {
  margin-left: 10px;
}

.profile_photo img {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border: 1px solid #aaa;
  width: 70px;
  height: 70px;
}


/*.cover_photo {
   height: 110px;
}*/

.profile_photo {
  display: flex;
  align-items: center
}

＆＃13;

<div class="cover_photo" style="background:red">


  <div class="dropdown">
    <a href="" class="dropdown-toggle pull-right m-opt-prof" type="button" id="menu1" data-toggle="dropdown">
      <span class="icon icon-option"></span>
    </a>
    <br>
    <br>
    <ul class="dropdown-menu pull-right m-prof-link-opt" role="menu" aria-labelledby="menu1">
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">
                            Dropdown1
                        </a>
      </li>
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">
                            Dropdown2
                        </a>
      </li>
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">
                            Dropdown3
                        </a>
      </li>
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="edit_profile">
                            Edit profile
                        </a>
      </li>
    </ul>
  </div>
  <div class="profile_photo">
    <img src="http://via.placeholder.com/350x150">
    <b>
               UserName
              </b>

  </div>
</div>
<div id="spro_d_d">
  <div id="spro_d">

    Online
    <p>
      <font color="#656565">
            Full Name
          </font>
      <br> Bio bio bio
    </p>
    <?php echo '<span class="icon icon-website spro_m_d" title="website"></span>&nbsp;'.$set_site; ?>&nbsp;&nbsp;&nbsp;&nbsp;
      <?php echo '<span class="icon icon-location spro_m_d" title="location"></span>&nbsp;'.$location; ?>
  </div>
</div>
<hr class="hr_line">
<div id="u_pff_st_b">
  <div class="row">
    <div id="u_pff_st" class="col-xs-4 col-sm-4">
      <a href="#post">
              0<br>
              Posts
            </a>
    </div>
    <div id="u_pff_st" class="col-xs-4 col-sm-4">
      <a href="#followers">
              0<br>
              Followers
            </a>
    </div>
    <div id="u_pff_st" class="col-xs-4 col-sm-4">
      <a href="#following">
              0<br>
              Following
            </a>
    </div>
  </div>
  <!-- row -->
</div>

＆＃13;

如何使用css在个人资料照片的右侧显示用户名

1 个答案: