CSS连续图像旁边的正确对齐

Question

我正在尝试将文本对齐到图像的右侧，但我似乎无法使其正常工作，我尝试了不同的css方法，但无法将其工作。

编辑：另外，如果我把它放在顶部，我将如何调整？如果我手动调整它，那么底行也会搞砸。

它看起来像什么（默认）

我想要它看起来像（只有第一个，其他人搞砸了）

这是css：

.slider__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__image {
  font-size: 2.7rem;
      color: #2196F3;
}
.slider__caption {
    font-weight: 300;
    top: 95px;
    margin-left: 80px !important;
    position: absolute;
    margin: 2rem 0 1rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    vertical-align: text-bottom;
}
.slider__txt {
    color: #f00;
    margin-bottom: 3rem;
    max-width: 300px;
    position: absolute;
    top: 95px;
    margin-left: 10px;
    font-size: 17px;
    text-align: left;
}

这是html：

<div class="row">
    <div class="col-md-4">
        <div class="slider__contents">
              <img class="img-avatar1" src="/images/team/1.jpg"/>
              <h2 class="slider__caption">Matt Sowards</h2>
              <p class="slider__txt">Founder</p>
              <!-- <a href="#" target="_blank"><p class="slider__steam">Steam Profile</p></a> -->
        </div>
    </div>
</div>

Answer 1

将文本标签包装到额外的标记中并切换到正确的弹性使用将为您提供您所追求的结果。使用绝对定位不是这里的方法。请参阅下面的代码段（我删除了一些代码，我的添加内容后面跟着注释）：

.slider__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  background: gray;
}
.slider__image {
  font-size: 2.7rem;
  color: #2196F3;
  display: block;
  width: 4rem; /* Supposed to be the default size of the avatar */
  height: 4rem; /* Supposed to be the default size of the avatar */
  padding: 4px; /* Just to replicate your styles */
  border: 2px solid red; /* Just to replicate your styles */
  border-radius: 50%; /* Just to replicate your styles */
  background-color: white; /* Just to replicate your styles */
  overflow: hidden; /* Just to replicate your styles */
}
.slider__image img {
  width: 100%; /* Fit to container */
  border-radius: 50%; /* Round image */
}
.slider__copy { /* Added to wrap the text */
  display: flex;
  flex-direction: column;
  margin-left: 10px; /* Avoids text sticking to the avatar */
}
.slider__caption {
  font-weight: 300;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  vertical-align: text-bottom;
  margin: 0; /* Removes default margins, season to taste */
}
.slider__txt {
  color: #f00;
  max-width: 300px;
  font-size: 17px;
  text-align: left;
  margin: 0; /* Removes default margins, season to taste */
  order: -1; /* Places it first in the current flex flow */
}

<div class="row">
    <div class="col-md-4">
        <div class="slider__contents">
              <div class="slider__image"><!-- Added this wrapper around your image, name as you wish -->
                <img class="img-avatar1" src="/images/team/1.jpg" alt="Avatar"/>
              </div>
              <div class="slider__copy"><!-- Added this wrapper around your text, name as you wish -->
                <h2 class="slider__caption">Matt Sowards</h2>
                <p class="slider__txt">Founder</p>
                <!-- <a href="#" target="_blank"><p class="slider__steam">Steam Profile</p></a> -->
              </div>
        </div>
    </div>
</div>

Answer 2

您可以使用bootstrap cols执行此操作

将它们放在一行中的示例

<div class='row'>
  <div class=col-xs-3>
    <img src='your img'/>
    <div>
   <div class='col-xs-7'>
     <p>your text</p>
   </div>
  </div>

然后你可以通过使用col-xs-pull- *来修复文本的定位，使其显示在img上。我从来没有测试过这个，所以你可能不得不四处寻找柱子的位置。只是一个建议

Answer 3

如果您可以更改标记，您可以考虑以下结构：

.row {
  display: flex;
  justify-content: space-around;
  margin: 20px;
}
.parent {
  display: flex;
  float: left;
}

.child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.position {
  color: red;
}

.name {
  font-size: 30px;
}

<div class="row">
  <div class="parent">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="child">
      <div class="position">Developer</div>
      <div class="name">Name Nmae</div>
    </div>
  </div>
  <div class="parent">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="child">
      <div class="position">Developer</div>
      <div class="name">Name Nmae</div>
    </div>
  </div>
  <div class="parent">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="child">
      <div class="position">Developer</div>
      <div class="name">Name Nmae</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="parent">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="child">
      <div class="position">Developer</div>
      <div class="name">Name Nmae</div>
    </div>
  </div>
  <div class="parent">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="child">
      <div class="position">Developer</div>
      <div class="name">Name Nmae</div>
    </div>
  </div>
</div>