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

原文 标签 html css

我正在尝试将文本对齐到图像的右侧,但似乎无法使其正常工作,我尝试了不同的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>

最佳答案

将您的文本标签包装成额外的标记,然后切换到适当的flex使用方式,即可获得所需的结果。使用绝对定位不是此处的方法。参见下面的代码片段(我删除了一些代码,在添加的内容后加上注释):



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

关于html - 连续图像旁边的CSS正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49060082/

相关文章:

javascript - 创建导航菜单一个导航项比容器的高度高

javascript - 通过功能保持图像源更改

php - 修剪多个抛物线PHP

javascript - 如何清理输入中的 JS 和 HTML?

html - Bootstrap-列不会在xs上垂直堆叠

html - 网站图标未更新;闪烁新版本,然后还原

javascript - 使用 Javascript/JQuery 以编程方式滚动 HTML 表格

html - 百分比高度 HTML 5/CSS

javascript - 如何使用CSS使用填充来使可变长度菜单扩展到屏幕底部?

html - 在列明智禁用表边框