Адаптивное позиционирование текста? - PullRequest
Новая
       37

Адаптивное позиционирование текста?

0 голосов
/ 20 марта 2019

Я использую слайдер Карусель Bootstrap с текстом (карусель-заголовок).Это отзывчиво на всех устройствах, но текст всегда по центру и в нижней части экрана.Я знаю, как разместить текст там, где я хочу.

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

.carousel-caption {
  top: 35%;
  width:500px;
  left: 220px;
  bottom: auto;
}

.red {
  color:red;
  
}

.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.lnr {
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.05em;
  stroke-width: 1;
}

.services-icon {
  margin-bottom: 20px;
  font-size: 30px;
}
bgc2, .vLine, .hLine {
    background-color: #0F52BA;
}

.quote-icon {
  font-size: 40px;
  margin-bottom: 20px;
}
.services-icon {
    font-size: 60px;
    margin-left: 2rem;
}

    .slide1-title {
      font-size: 40px;
    } 
    
    .slide1-content{
      font-size:18px;
    }   
.btn-style-one {
  position: relative;
  padding: 14px 30px;
  line-height: 1em;
  background: #221f1f;
  margin-top: 20px;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
  border: 2px solid transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>                        
                </ol>
          <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
              <div class="carousel-caption d-lg-block slide1-bg">
                
                    <h2 class="display-4  slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
                <p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
                    <a href="#o-nama" class="theme-btn btn-style-one scroll-to-target" data-target="#o-nama">BUTTON</a>
                
              </div>
            </div>
            
               </div>
            </div>        
          </div>
          <div class="carousel-arrow">
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
                      
          </div>

Ответы [ 3 ]

0 голосов
/ 20 марта 2019

за минимальное изменение; замените свой стиль блока .carousel-caption следующим: 

.carousel-caption {
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  max-width: 100vw;
  padding: 0 15%;
}

И добавьте для этого «Я просто хочу поместить текст в середине экрана»: 

.carousel-caption .lead {
  text-align: left;
  position: absolute;
  top: 45vh;
}

Скрипка: https://jsfiddle.net/c3h0zt9b/

0 голосов
/ 20 марта 2019 

.carousel-item .carousel-caption {
  top: 35%;
  width:500px;
  left: 220px;
  bottom: auto;
right: auto;
text-align: left;
}

.red {
  color:red;
  
}

.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.lnr {
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.05em;
  stroke-width: 1;
}

.services-icon {
  margin-bottom: 20px;
  font-size: 30px;
}
bgc2, .vLine, .hLine {
    background-color: #0F52BA;
}

.quote-icon {
  font-size: 40px;
  margin-bottom: 20px;
}
.services-icon {
    font-size: 60px;
    margin-left: 2rem;
}

    .slide1-title {
      font-size: 40px;
    } 
    
    .slide1-content{
      font-size:18px;
    }   
.btn-style-one {
  position: relative;
  padding: 14px 30px;
  line-height: 1em;
  background: #221f1f;
  margin-top: 20px;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
  border: 2px solid transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>                        
                </ol>
          <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
              <div class="carousel-caption d-lg-block slide1-bg">
                
                    <h2 class="display-4  slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
                <p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
                    <a href="#o-nama" class="theme-btn btn-style-one scroll-to-target" data-target="#o-nama">BUTTON</a>
                
              </div>
            </div>
            
               </div>
            </div>        
          </div>
          <div class="carousel-arrow">
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
                      
          </div>
0 голосов
/ 20 марта 2019

Я не уверен, хотите ли вы центрировать текст по горизонтали или вертикали.Итак, оба ответа: По горизонтали Элемент, который вы хотите центрировать .carousel-caption, имеет ширину в пикселях и поля в процентах.

Вы можете использовать только процентные значения: 

.carousel-caption {
    width: 70%;
    left: 15%;
}

или просто сделать его полной шириной, так как весь содержащийся текст отцентрирован: 

.carousel-caption {
   width: 100%;
   left: 0px;
   right:0px;
}

Вертикально 

.carousel-caption {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}
...