时间戳

首页 > 解决方案 > 如何在 CSS 中将图片整齐地放置在框的左侧

html - 如何在 CSS 中将图片整齐地放置在框的左侧

问题描述

CSS的图片

我想把图片整齐地放在盒子的中间和左边，字体在中间。但是，当我弄乱边距和填充时，它并没有按照我想要的方式工作。

这是我的 CSS 和 HTML。

CSS

 .wrap {
    width: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    margin: auto;
  }

  .make-center {
    text-align: center;
  }
  .media-content {
    font-size: 100px;
  }

  .card {
    margin-bottom: 15px;
    margin: 150px auto auto auto;
    width: 2000px;
    border-color: #1abc9c;
  }

  .card-content {
    width: 3000px;
    height: 200px;
  }

  .wrapper {
    /* border-bottom: 10px solid #1abc9c; */
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0px 10px 20px -6px #1abc9c;
    border-radius: 100px;
    margin: 200px auto;
    background: white;
    width: 50%;
    height: 150px;
    padding: 40px 20px;
  }

  .celeb-name {
    padding: 5px 10px 10px 5px;
  }

当我包含图片时，.celeb-name 不会将名人的名字放在中间，当我使用 CSS 中的“填充”功能时，图片会变形。

HTML

 <div class="star-list" id="star-box">
  <div class="star-list" id="star-box">
    <div class="card" data-name="${name}\">
      <div class="card-content">
        <div class="media">
          <div class="media-left">
            <figure class="image is-48x48">
              <img
                src="https://api.buzzanglemusic.com/images/artists/1374"
                alt="Placeholder image"
              />
            </figure>
          </div>
          <div class="media-content">
            <p>1. DRAKE</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

标签： htmlcssfrontend

解决方案

我会使用CSS Flexbox。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid green;
  border-radius: 500px;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 6px 1px rgba(109, 103, 104, 0.88);
  
}

.celeb-img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-left: 5px;
 }
 
 .celeb-name {
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  text-transform: uppercase;
 }
<div class="container">
   <img class="celeb-img" src="https://api.buzzanglemusic.com/images/artists/1374" alt="Placeholder image" />
   <p class="celeb-name">1. Drake</p>
</div>

推荐阅读