Я пытаюсь выровнять текст справа от изображения, но я не могу заставить его работать, я пробовал разные методы 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>
0
Samuel Stubbings 2 Мар 2018 в 02:00

3 ответа

Лучший ответ

Обертывание ваших текстовых тегов в дополнительную разметку и переключение на правильное использование 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>
1
chriskirknielsen 1 Мар 2018 в 23:45

Вы можете сделать это с помощью начальной загрузки

Пример размещения их в ряд, вот так

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

Затем вы можете исправить положение текста, чтобы он отображался поверх img, используя col-xs-pull- *. Я никогда не проверял это, поэтому вам, возможно, придется поиграться с расположением колонок. Просто предложение, хотя

0
radlaz 1 Мар 2018 в 23:17

Если вы можете изменить разметку, вы можете рассмотреть эту структуру:

.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>
0
Cheslab 1 Мар 2018 в 23:29