Css layout bootstrap overlay

Question

Я знаю, что есть аналогичный вопрос, но я пробовал их все и провалился. В этом примере есть 4 строки с изображением и ссылкой в ​​каждом.

Я хочу, чтобы каждая ссылка накладывала каждое изображение, но оно всегда воспринимает всю ширину как относительную.

IE ссылка в "Mann" на самом деле для "Badetuch".

Я просто хочу установить css, чтобы тестовый класс для каждого был в горизонтальном центре для каждого изображения.

Установка их отдельно не идеальна, и для col-2 .test я устанавливаю ее на 30%, которая должна быть 50%, но абсолютная на основе изображения в col2.

Я использую модуль views из начальной загрузки, чтобы создать сайт.

Надеюсь, что это имеет смысл. Любая помощь будет оценена. Ta

Answer 1

О, мальчик, вы структурируете столами? Приготовьтесь к потрошению! (Не со мной - я оставлю остальных к этому.) Кроме того, при публикации вопроса о SO полезно использовать параметр «JS/CSS/HTML Snippet» на панели инструментов редактирования, чтобы люди могли читать ваш код и увидеть результаты, а не щелкнуть на маленьком изображении, которое им нужно увеличить, чтобы читать.

Теперь на ваш вопрос - вот что вы делаете.

.view-content > .row > div { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
.overlay { 
 
    width: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -1em; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="region region-content"> 
 
    <section id="block-system-main" class="block block-system clearfix"> 
 
    <div class="view view-produkte view-id-produkte view-display-id-page view-dom-id-WhyDidYouDoThisClassMakeThatNumberAnIDInstead"> 
 
     <div class="view-content"> 
 
     <div class="row"> 
 
      <div class="col-xs-3"> 
 
      <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive"> 
 
      <a href="#" class="overlay">Link 1</a> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
      <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive"> 
 
      <a href="#" class="overlay">Link 2</a> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
      <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive"> 
 
      <a href="#" class="overlay">Link 3</a> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
      <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive"> 
 
      <a href="#" class="overlay">Link 4</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</div>

Прежде всего, вы делаете «3-колонки», написав «Col-хз-3» (установка для хз экран размер передается на большие размеры, если не указано иное). Я установил поле родительского div и дополнение к 0, потому что у вас не было места между вашими окнами в примере. Я также дал им границу, чтобы различать разные изображения и размер коробки в рамке, чтобы они соответствовали их столбцам должным образом.

Итак, чтобы получить ссылку на центр по горизонтали внутри div (и это ключ - он находится в пределах того же столбца div, что и изображение), я устанавливаю ширину 100%, что составляет 100% от родительского «col-xs-3»), а затем дал ему выравнивание по центру центра. Якорные теги являются встроенными элементами по умолчанию; они только настолько широки, как требует текст, содержащий текст, поэтому установка text-align: center без установки ширины: 100% ничего не делает, потому что вы по существу центрируете текст по ширине, которую он занимает, поэтому нет видимого эффекта , Ширина установки: 100% заставляет охватить всю ширину родительского div, что дает ему пространство в центре.

Теперь, чтобы получить его по вертикали сверху, я дал ему положение: абсолютное. Это не позволяет ему отойти от образа изображения. Элемент с позицией: absolute делает все, что ему говорят, относительно первого родителя, с которым он сталкивается с нестатическим значением для позиции. (Вот почему я установил контент родительского div в относительный, но не дал ему верхнее или левое значение для его перемещения.) После того, как я установил его в положение: абсолютное, я должен сказать ему, куда идти относительно этого родителя, и я хочу, чтобы он пошел в середину. Изображение - это самый большой элемент, который содержит родительский элемент, поэтому высота и ширина родителя равны высоте изображения. Я установил верхнее значение тега привязки на 50%, что говорит ему о снижении 50% высоты родителя. Но это использует верхний левый угол анкерного тега в качестве точки для перемещения, поэтому, следовательно, ссылка не совсем вертикально центрирована - она ​​немного низкая. Вот почему я установил margin-top в -1em.1em = размер шрифта по умолчанию. Поэтому -1em для margin-top сообщает, что он перемещается в направлении «негативный верх» - иначе - на единицу, равную размеру шрифта. Теперь базовая линия вертикально центрирована относительно родительского элемента.

Позвольте мне сообщить вам, что вы читаете документацию Bootstrap. Вы не используете его совершенно правильно. Удачи с проектом.